我是JavaScript的新手。我很难理解如何访问变量,以便我可以将它们输入方程式并将答案输入HTML。
。html:
<body>
<div onclick="firstq(100)">100</div>
<div onclick="firstq(150)">150</div>
<div onclick="firstq(300)">300</div>
<div id="results"></div>
</body>
JavaScript:
function firstq(one) {
switch(one) {
case 100:
var answer1 = 100;
break;
case 150:
var answer1 = 150;
break;
case 300:
var answer1 = 300;
break;
}
document.getElementById("results").innerHTML="The total is = "+answer1;
}
它可以正常运行,直到目前为止,并将显示输出,但是我真正想做的是制作一个从不同答案构建的方程,然后在单击另一个DIV之后输出它,某种程度上类似于:
更多html:
<div onclick="secondq(5)">5</div>
<div onclick="secondq(10)">10</div>
<div onclick="secondq(20)">20</div>
<div id="thebutton" onclick="clickedthebutton()'>Click me!</div>
更多JS:
function firstq(two) {
switch(two) {
case 5:
var answer2 = 5;
break;
case 10:
var answer2 = 10;
break;
case 20:
var answer2 = 20;
break;
}
}
function clickedthebutton() {
var theanswer = answer1*answer2;
document.getElementById("results").innerHTML="The total is = "+theanswer;
}
我不确定是否需要将变量进行全局或我忽略的变量。
谢谢!
如果我很好地了解您,您将想做这样的事情:
var calc = (function(){
var answer1 = 0,
answer2 = 0;
function firstq(one) {
answer1 = 300;
}
function secondq(two) {
answer2 = two;
}
function clickedthebutton() {
var theanswer = answer1*answer2;
document.getElementById("results").innerHTML="The total is = "+theanswer;
}
return {
firstq: firstq,
secondq: secondq,
clickedthebutton: clickedthebutton,
}
}());
<div onclick="calc.firstq(100)">100</div>
<div onclick="calc.firstq(150)">150</div>
<div onclick="calc.firstq(300)">300</div>
<div id="results"></div>
<div onclick="calc.secondq(5)">5</div>
<div onclick="calc.secondq(10)">10</div>
<div onclick="calc.secondq(20)">20</div>
<div id="thebutton" onclick="calc.clickedthebutton()'>Click me!</div>
避免使用HTML属性注册点击事件。最好在JavaScript代码中附加活动;最重要的是,避免将许多变量引入全局范围
要在javascript标签中声明全局变量:
var answer1;
var asnwer2;
我在您的JavaScript代码中没有看到函数 secondq(two)