如何从不同函数中获取数字变量,将它们插入方程中,然后输出答案到HTML中



我是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)

最新更新