2011-03-15 207 views
0

这是我的代码,我担心一些变量没有被正确地限定范围。Javascript Var范围帮助

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Memory Test</title> 
     <link href="bio.css" rel="stylesheet" type="text/css"> 
     <script src="../jquery-1.5.min.js" type="text/javascript"></script> 
    </head> 
    <body onLoad="timeMsg()"> 
     <div id="container"> 
      <h3>The numbers are...</h3> 
      <input id="number" type="text" value="495"/> 
      <div id="remember"> 

      </div> 
      <div id="email"> 
       <input id="a"></input> 
       <input id="b"></input> 
       <input id="c"></input> 
       <input id="d"></input> 
       <input id="e"></input> 
       <input id="f"></input> 
       <input id="g"></input> 
       <input id="h"></input> 
       <input id="i"></input> 
      </div> 
      <script> 
      var a = document.getElementById("a").value; 
      var b = document.getElementById("b").value; 
      var c = document.getElementById("c").value; 
      var d = document.getElementById("d").value; 
      var e = document.getElementById("e").value; 
      var f = document.getElementById("f").value; 
      var g = document.getElementById("g").value; 
      var h = document.getElementById("h").value; 
      var i = document.getElementById("i").value; 


      function timeMsg() 
      { 
      var t=setTimeout("alertMsg()",500); 
      } 
      function alertMsg() 
      { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="one" id="one" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet()"/>'); 
       document.getElementById('number').value = 'no cheating...'; 
       } 

      function changeSet() { 
       var s=setTimeout("alertYea()",500); 
       var a = document.getElementById('a').innerHTML = (document.getElementById("one").value); 
       document.getElementById('remember').innerHTML = ('<p id="bumper">2</p>'); 
       document.getElementById('number').value = '9264'; 
      } 
      function alertYea() { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="two" id="two" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet2()"/>'); 
       document.getElementById('number').value = 'no cheating...'; 

       } 

      function changeSet2() { 
       var a=setTimeout("alertYea2()",500); 
       var b = document.getElementById('b').innerHTML = (document.getElementById("two").value); 
       document.getElementById('remember').innerHTML = ('<p id="bumper">3</p>'); 
       document.getElementById('number').value = '38671'; 
      } 

      function alertYea2() { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="three" id="three" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet3()"/>'); 
       document.getElementById('number').value = 'no cheating...'; 

       } 

      function changeSet3() { 
       var a=setTimeout("alertYea3()",500); 
       var c = document.getElementById('c').innerHTML = (document.getElementById("three").value); 
       document.getElementById('remember').innerHTML = ('<p id="bumper">4</p>'); 
       document.getElementById('number').value = '938263'; 
      } 

      function alertYea3() { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="four" id="four" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet4()"/>'); 
       document.getElementById('number').value = 'no cheating...'; 

       } 

      function changeSet4() { 
       var a=setTimeout("alertYea4()",500); 
       var d = document.getElementById('d').innerHTML = (document.getElementById("four").value); 
       document.getElementById('remember').innerHTML = ('<p id="bumper">5</p>'); 
       document.getElementById('number').value = '8351032'; 
      } 

      function alertYea4() { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="five" id="five" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet5()"/>'); 
       document.getElementById('number').value = 'no cheating...'; 

       } 

      function changeSet5() { 
       var a=setTimeout("alertYea5()",500); 
       var e = document.getElementById('e').innerHTML = (document.getElementById("five").value); 
       document.getElementById('remember').innerHTML = ('<p id="bumper">6</p>'); 
       document.getElementById('number').value = '02619815'; 
      } 

      function alertYea5() { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="six" id="six" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet6()"/>'); 
       document.getElementById('number').value = 'no cheating...'; 

       } 

      function changeSet6() { 
       var a=setTimeout("alertYea6()",500); 
       var f = document.getElementById('f').innerHTML = (document.getElementById("six").value); 
       document.getElementById('remember').innerHTML = ('<p id="bumper">7</p>'); 
       document.getElementById('number').value = '274619523'; 
      } 

      function alertYea6() { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="seven" id="seven" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet7()"/>'); 
       document.getElementById('number').value = 'no cheating...'; 

       } 

      function changeSet7() { 
       var a=setTimeout("alertYea7()",500); 
       var g = document.getElementById('g').innerHTML = (document.getElementById("seven").value); 
       document.getElementById('remember').innerHTML = ('<p id="bumper">8</p>'); 
       document.getElementById('number').value = '1681324849'; 
      } 

      function alertYea7() { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="eight" id="eight" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet8()"/>'); 
       document.getElementById('number').value = 'no cheating...'; 

       } 

      function changeSet8() { 
       var a=setTimeout("alertYea8()",500); 
       var h = document.getElementById('h').innerHTML = (document.getElementById("eight").value); 
       document.getElementById('remember').innerHTML = ('<p id="bumper">9</p>'); 
       document.getElementById('number').value = '48372605629'; 
       emailData.data.value = h; 
      } 

      function alertYea8() { 
       document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="nine" id="nine" type="text"></input></br><p id="send"></p><input id="answer" name="submit" type="button" onclick="finals()" value="Next"/>'); 
       document.getElementById('number').value = 'no cheating...'; 

       } 
      function finals() { 
       var i = document.getElementById('i').innerHTML = (document.getElementById("nine").value); 
       document.getElementById('remember').innerHTML = ('<div id="send"><form action="mailto:[email protected]" method="POST" enctype="text/plain" name="emailData"></br><input id="data" type="text" size="20" name="data"><br><input type="submit" value="Submit and continue to letters!"></form></div>'); 

       emailData.data.value = a + b + c + d + e + f + g + h + i; 
       var total= 0; 
       $('input', '#email').each(function() { 
        total += parseInt($(this).val()); 
       }); 
       emailData.data.value = total; 
       } 
      </script> 

     </div> 
    </body> 
</html> 

问题在于在最后一行,

emailData.data.value = A + B + C + d + E + F + G + H + I; 该页面只返回输入ID为i的值,而不是输入ID为a-h。相反,它显示为每个输入id值的[对象HTMLInputElement]吨。我甚至打电话给。价值。我如何解决这个问题,以便

emailData.data.value = a + b + c + d + e + f + g + h + i; 反而显示一组相应的值?

+0

它们真的是你的函数名吗? – alex 2011-03-15 01:11:45

+2

哈哈lovin it dude – hubrid 2011-03-15 01:13:01

+0

你的代码中有很多'document.getElementById'调用。您应该使用简写函数来减少代码的大小。 – 2011-03-15 01:14:23

回答

0

每个范围只应使用一个var声明。所以,像这样:

var a = document.getElementById("a").value, 
    b = document.getElementById("b").value; // and so on 

你也可以使用jQuery简化代码很多,如果你想,这样你就不必使用document.getElementById这么多(或作出document.getElementById较短的变量)

var a = $("#a").val(), 
    b = $("#b").val(); 
... 
function alertMsg(){ 
    $("#remember").html("..."); 
} 

您还在另一个范围内重新声明了一些全局变量,并尝试获取/设置文本输入的innerHTML。这不起作用。

function changeSet(){ 
var a = ...; // <- this line and others in other functions 
}