局部变量不将值存储为单个整数

时间：2016-02-14 07:10:39

标签： javascript html function variables local

我正在进行测验，选择某些答案会将答案分配给总和，并在最后将总和与预定义指南进行比较，您将获得基于此总和值的字符。

我的问题是，当我使用console.log(sum);测试我的和值来正确记录输入时，它会将它们记录为undefined12323121（其中数字是点值）。

最后它应该是一个数字，而是将它们存储起来，就像它是一个字符串。

我的测验是10个问题，其中3个可能的答案，其中按顺序回答值为1,2,3。我使用inputs[i].value求和+ =每个答案的值以得到最后的总数。

控制台中测验总和的输出是未定义的，然后是点值而不是这些值的总和，链接的图片有我的源代码。

<html>


    <head>
        <title>Which Star Wars Character Are You?</title>
    </head>
    <style>
    body {
    background-color: #0000ff ;
    }

    h1 {
    color: black;
    text-align: center;
    }

    p {
    font-family: "Arial";
    font-size: 25px;
    text-align: center;
    }
    .house {
    max-width: 200px;
    width: 100%;
    }



    </style>
    <h1>Which Star Wars Character Are You?</h1>
<form>
What color is your Lightsaber?
    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Red</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Blue</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Purple</label> 
</form>

<form>
With which organization would you most likely aligned?



    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Empire</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Rebel Alliance</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Neither</label> 

    </form>

<form>
Do you submit to the Emperor's will?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Yes</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Maybe</label> 

    </form>

<form>
Would you help a friend if it meant being sealed in carbonite?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">No of course not</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes, I want to save my friends</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Depends on the friend</label> 

    </form>

<form>
Do you like Wookies?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Only as a tool to crush my enemies</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes I consider the creatures as friends</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">I've met a few good Wookies in my time, a few hostile ones     too</label> 

    </form>

<form>
Would you ever construct a Droid Army to usurp the Empire's power?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">No, the Empire must be upheld, always</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, using an Army of Droids would make us just as bad</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Yes, absolutely</label> 

    </form>

<form>
Jar Jar Binks yay or nay?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Yay</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">My father liked Jar Jar</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Nay, a thousand times, Nay</label> 

    </form>

<form>
Have you seen the Mr. Plinkett Star Wars Reviews?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">No</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">I've heard of them</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Yes, he is right on all points raised</label> 

    </form>

<form>
Would you build a DeathStar or something like it to assert dominance over the Galaxy?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Yes, maybe even 2 times</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, the DeathStar is a war machine that must be destroyed</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">I would possible use such a machine or vessel for my goals</label> 

    </form>

<form>
Did you like/know of KOTOR 1 or 2


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">No</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">I liked KOTO2 but KOTOR 1 had a lame ending.</label> 



<br><br><input type="button" id="qButton" value="Choose">
</form>
<p id="QuestionParagraph"></p>

<script>




function getButton() {
var button = document.getElementById('qButton');
button.onclick = getResult;
}

function getResult(){

var sum;
var inputs = document.getElementsByName('lightsaber');
for (i=0;i<inputs.length;i++){
    if (inputs[i].checked) {
    sum += inputs[i].value;
    console.log(sum);

        }
    }
}

window.onload = getButton;
</script>       
</html>

＆＃13;
＆＃13; 
function getButton() {
  var button = document.getElementById('qButton');
  button.onclick = getResult;
}

function getResult() {

  var sum;
  var inputs = document.getElementsByName('lightsaber');
  for (i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      sum += inputs[i].value;
      console.log(sum);

    }
  }
}

window.onload = getButton;
＆＃13; 
body {
  background-color: #fff;
}
h1 {
  color: black;
  text-align: center;
}
p {
  font-family: "Arial";
  font-size: 25px;
  text-align: center;
}
.house {
  max-width: 200px;
  width: 100%;
}
＆＃13; 
	<h1>Which Star Wars Character Are You?</h1>
<form>
  What color is your Lightsaber?
  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Red</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Blue</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Purple</label>
</form>

<form>
  With which organization would you most likely aligned?



  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Empire</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Rebel Alliance</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Neither</label>

</form>

<form>
  Do you submit to the Emperor's will?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Yes</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">No</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Maybe</label>

</form>

<form>
  Would you help a friend if it meant being sealed in carbonite?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">No of course not</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Yes, I want to save my friends</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Depends on the friend</label>

</form>

<form>
  Do you like Wookies?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Only as a tool to crush my enemies</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Yes I consider the creatures as friends</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">I've met a few good Wookies in my time, a few hostile ones too</label>

</form>

<form>
  Would you ever construct a Droid Army to usurp the Empire's power?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">No, the Empire must be upheld, always</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">No, using an Army of Droids would make us just as bad</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Yes, absolutely</label>

</form>

<form>
  Jar Jar Binks yay or nay?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Yay</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">My father liked Jar Jar</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Nay, a thousand times, Nay</label>

</form>

<form>
  Have you seen the Mr. Plinkett Star Wars Reviews?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">No</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">I've heard of them</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Yes, he is right on all points raised</label>

</form>

<form>
  Would you build a DeathStar or something like it to assert dominance over the Galaxy?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Yes, maybe even 2 times</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">No, the DeathStar is a war machine that must be destroyed</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">I would possible use such a machine or vessel for my goals</label>

</form>

<form>
  Did you like/know of KOTOR 1 or 2


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">No</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Yes</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">I liked KOTO2 but KOTOR 1 had a lame ending.</label>



  <br>
  <br>
  <input type="button" id="qButton" value="Choose">
</form>
<p id="QuestionParagraph"></p>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

使用parseInt()函数解析输入值。您只是连接值。将值传递给parseInt，然后添加到sum。与sum += parseInt(inputs[i].value);

一样

答案 1 :(得分：0)

您的代码存在多个问题：

1）字符串值不总结

Waqas已就此作出回应，但这里有一个简短的回顾：尽管HTML中的<input>值仅包含数字字符，但您从中收集的数据类型为string。在JavaScript +和+=运算符中，如果其中任何值不是数字和concatenates them if at least one of them is a string，则不会相加两个值。

因此，您需要在使用前将所有string转换为number s。 parseInt()将完成这项工作，是的，但我建议将字符串乘以1（使用* 1），因为它更短，更易读，减小了文件大小，only a little bit slower。< / p>

2）没有sum

的初始值

这就是您获得undefined值的原因。如果您按如下方式声明sum，则它将具有初始值（0），+=运算符将开始添加到0，而不是undefined }。

var sum=0;

如果您没有先解决此问题，parseInt()或* 1将无法提供帮助，您将获得NaN作为+=操作的结果

3）相同的ID

如果您的HTML标记上有id个相同的内容，那么您的网页看起来会很好，甚至可以正常使用，但是一旦您在开发过程中深入了解，就会出现一些障碍，特别是在使用方面CSS和JavaScript中的选择器，<label>标记和页面上的锚点（href="#something"）。在这种情况下，例如，<label> s不标记正确的单选按钮，但它应该。

因此，请始终在DOM中使用唯一的id。

4）相同的名称＆amp;多个表格

您的HTML有多个<form>和相同的name属性，这很糟糕。考虑一般场景，通过单击某个服务器端脚本按钮，post您的调查问卷的答案，该脚本将结果存储到数据库或发送带有结果的电子邮件消息。

如果您尝试使用<button type="submit">或<input type="submit">放置在其中一个s中，您将看到您无法post所有答案，但只有一个在那<form>。

您可以通过JavaScript发送多个<form>吗？嗯，你可以，但还有很多额外的努力。有时这证明是必要的，但不是在你的情况下。对于每个问题，您最好只使用一个<form>和唯一name属性。这样，您将确保提交所有答案并且值具有唯一键。

相关问题
最新问题