2015-11-04 139 views
0

我正在为我的经济类做这个测验。我选择在java脚本中完成它。我的脚本运行后页面刷新。该页面只是应该改变输入标签背景的颜色。我究竟做错了什么?第一块变量收集信息,第二块变量设置为小写。代码在html文件中工作正常,但我希望它是一个外部JavaScript。javascript运行后我的网页刷新

编辑:我做了西蒙说要做的,通过从我的js删除[返回false;]并将我的onclick更改为[onclick =“return checkAnswers();”],但我仍然遇到同样的问题。

编辑:我做了什么邓肯说,它现在完美的作品,谢谢!

HTML:

<!DOCTYPE html /> 

<html> 
    <head> 
     <title>Chapter 2</title> 

     <style type="text/css"> 
     input{ 
      width:150px; 
      border:none; 
      border-bottom:solid 1px #C0C0C0; 
      text-align:center; 
     } 
     h1, h3, body{ 
      text-align:center; 
     } 
     div{ 
      border:double 3px #C0C0C0; 
      margin:5px; 
      padding:10px; 
      border-radius:5%; 
      text-align:left; 
     } 
     a:link, a:visited{ 
      color:#0000FF; 
     } 
     a:hover{ 
      color:#CC00FF; 
      font-size:1.5em; 
     } 
     #sect2def2{ 
      width:200px; 
     } 
     </style> 

     <script type="text/javascript" src="javascript\script.js"></script> 
    </head> 
    <body> 
     <h1>Chapter 3</h1> 
     <form> 
      <a name="notes"></a><h3>Notes</h3> 
      <div id="section1"> 
       <h3>Section 1</h3> 
       <input type="text" id="sect1def1"></input> is another name for capitalism, an economic system based on private ownership of productive resources. 
       <br /> 
       <input type="text" id="sect1def2"></input> is the ability of everyone to take part in the market by free choice. 
       <br /> 
       <input type="text" id="sect1def3"></input> is a situation in which everyone has the same economic rights under the law. 
       <br /> 
       A <input type="text" id="sect1def4"></input> is a situation in which people decide which legal agreements to enter into. 
       <br /> 
       The <input type="text" id="sect1def5"></input> is the force that encourages people and organizations to improve their material well being from economic activities. 
      </div> 
      <div id="section 2"> 
       <h3>Section 2</h3> 
       <input type="text" id="sect2def1"></input> is the money left over after the costs of producing a good or service have been subtracted from the revenue gained by selling that good or service. 
       <br /> 
       A <input type="text" id="sect2def2"></input> is a free enterprise economic system with some government involvement. 
      </div> 
      <div id="section 3"> 
       <h3>Section 3</h3> 
       <input type="text" id="sect3def1"></input> occurs when people who are not part of a marketplace interaction benefit from it or pay part of its costs. 
       <br /> 
       <input type="text" id="sect3def2"></input> are products provided by federal, state, and local governments and consumed by the public as a group. 
       <br /> 
       A <input type="text" id="sect3def3"></input> is a person who avoids paying for a good or service but who benefits from that good or service anyway. 
       <br /> 
       The <input type="text" id="sect3def4"></input> consists of all the goods and services that are necessary for the functioning of society. 
       <br /> 
       An <input type="text" id="sect3def5"></input> is a side effect of a product that affects someone other than the producer or the buyer. 
       <br /> 
       A <input type="text" id="sect3def6"></input> is an externality that imposes costs on people who were not involved in the original economic activity. 
       <br /> 
       A <input type="text" id="sect3def7"></input> is an externality that creates benefits for people who were not involved in the original economic activity. 
       <br /> 
       A <input type="text" id="sect3def8"></input> is a government payment that helps cover the cost of an economic activity that has the potential to benefit the public as a whole. 
       <br /> 
       The <input type="text" id="sect3def9"></input> consists of government programs designed to protect people from economic hardships. 
       <br /> 
       <input type="text" id="sect3def10"></input> are transfers of income from one person or group to another even though the receiver does not provide anything in return. 
       <br /> 
       A <input type="text" id="sect3def11"></input> is a transfer payment in which the government transfers income from taxpayers to recipients who do not provide anything in return. 
      </div> 
      <button id="notesButton" onclick="checkAnswers();">Submit</button> 
     </form> 
    </body> 
</html> 

的JavaScript:

function checkAnswers() { 
    var s1d1 = document.getElementById("sect1def1").value; 
    var s1d2 = document.getElementById("sect1def2").value; 
    var s1d3 = document.getElementById("sect1def3").value; 
    var s1d4 = document.getElementById("sect1def4").value; 
    var s1d5 = document.getElementById("sect1def5").value; 
    var s2d1 = document.getElementById("sect2def1").value; 
    var s2d2 = document.getElementById("sect2def2").value; 
    var s3d1 = document.getElementById("sect3def1").value; 
    var s3d2 = document.getElementById("sect3def2").value; 
    var s3d3 = document.getElementById("sect3def3").value; 
    var s3d4 = document.getElementById("sect3def4").value; 
    var s3d5 = document.getElementById("sect3def5").value; 
    var s3d6 = document.getElementById("sect3def6").value; 
    var s3d7 = document.getElementById("sect3def7").value; 
    var s3d8 = document.getElementById("sect3def8").value; 
    var s3d9 = document.getElementById("sect3def9").value; 
    var s3d10 = document.getElementById("sect3def10").value; 
    var s3d11 = document.getElementById("sect3def11").value; 

    var s1d1L = s1d1.toLowerCase(); 
    var s1d2L = s1d2.toLowerCase(); 
    var s1d3L = s1d3.toLowerCase(); 
    var s1d4L = s1d4.toLowerCase(); 
    var s1d5L = s1d5.toLowerCase(); 
    var s2d1L = s2d1.toLowerCase(); 
    var s2d2L = s2d2.toLowerCase(); 
    var s3d1L = s3d1.toLowerCase(); 
    var s3d2L = s3d2.toLowerCase(); 
    var s3d3L = s3d3.toLowerCase(); 
    var s3d4L = s3d4.toLowerCase(); 
    var s3d5L = s3d5.toLowerCase(); 
    var s3d6L = s3d6.toLowerCase(); 
    var s3d7L = s3d7.toLowerCase(); 
    var s3d8L = s3d8.toLowerCase(); 
    var s3d9L = s3d9.toLowerCase(); 
    var s3d10L = s3d10.toLowerCase(); 
    var s3d11L = s3d11.toLowerCase(); 

    if (s1d1L=="free enterprise system"){ 
     document.getElementById("sect1def1").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect1def1").style.backgroundColor = "#FF0000"; 
    } 
    if (s1d2L=="open opportunity"){ 
     document.getElementById("sect1def2").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect1def2").style.backgroundColor = "#FF0000"; 
    } 
    if (s1d3L=="legal equality"){ 
     document.getElementById("sect1def3").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect1def3").style.backgroundColor = "#FF0000"; 
    } 
    if (s1d4L=="free contract"){ 
     document.getElementById("sect1def4").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect1def4").style.backgroundColor = "#FF0000"; 
    } 
    if (s1d5L=="profit motive"){ 
     document.getElementById("sect1def5").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect1def5").style.backgroundColor = "#FF0000"; 
    } 
    if (s2d1L=="profit"){ 
     document.getElementById("sect2def1").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect2def1").style.backgroundColor = "#FF0000"; 
    } 
    if (s2d2L=="modified free enterprise economy"){ 
     document.getElementById("sect2def2").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect2def2").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d1L=="market failure"){ 
     document.getElementById("sect3def1").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def1").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d2L=="public goods"){ 
     document.getElementById("sect3def2").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def2").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d3L=="free rider"){ 
     document.getElementById("sect3def3").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def3").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d4L=="infrastructure"){ 
     document.getElementById("sect3def4").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def4").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d5L=="externality"){ 
        document.getElementById("sect3def5").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def5").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d6L=="negative externality"){ 
     document.getElementById("sect3def6").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def6").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d7L=="positive externality"){ 
     document.getElementById("sect3def7").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def7").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d8L=="subsidy"){ 
     document.getElementById("sect3def8").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def8").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d9L=="safety net"){ 
     document.getElementById("sect3def9").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def9").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d10L=="transfer payments"){ 
     document.getElementById("sect3def10").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def10").style.backgroundColor = "#FF0000"; 
    } 
    if (s3d11L=="public transfer payment"){ 
     document.getElementById("sect3def11").style.backgroundColor = "#00FF00"; 
    } else { 
     document.getElementById("sect3def11").style.backgroundColor = "#FF0000"; 
    } 
    return false; 
} 
+0

你为什么这么说? –

+0

有各种各样的方法可以减少你得到的代码量。这些单独的变量应该全部是用循环初始化的数组的一部分。这些测试可以全部缩减为地图查找。你的直接问题可能在@Simon的答案中。 – Pointy

+0

我是一个JavaScript初学者,我知道有一个更简单的方法来做到这一点,但我受限于我的知识。 –

回答

2

你不回你的onclick处理程序错误(你只能这样做在你的函数)。像这样的东西可能是罚款:

<button id="notesButton" onclick="return checkAnswers();">Submit</button> 

编辑:这是更好的绑定功能,以表单的onsubmit,在有人的情况下,用键盘提交表单,而无需使用您的按钮。

+0

我删除了“返回false”;并添加了“onclick =”return checkAnswers();“”但我仍然有同样的问题。 –

+0

你需要两个。在方法中没有返回错误。该方法不返回任何东西。通过点击处理程序中的“return checkAnswers()”,它将方法返回的值传递给按钮的单击事件。通过返回false到单击事件处理程序。它阻止它触发默认功能。 –

+0

谢谢邓肯! –