Javascript 如何只声明一次变量，以便在所有函数中使用；onclick"；_Javascript

Javascript 如何只声明一次变量，以便在所有函数中使用；onclick"；

javascript

Javascript 如何只声明一次变量，以便在所有函数中使用；onclick"；,javascript,Javascript,我想知道如何在函数之前只使用一次变量，这样我就可以使用变量，而不必在每个函数中再次声明它们 window.onload = function() { document.getElementById("soma").onclick = soma; document.getElementById("subtracao").onclick = subtracao; document.getElementById("multiplicacao").onclick = multip

我想知道如何在函数之前只使用一次变量，这样我就可以使用变量，而不必在每个函数中再次声明它们

window.onload = function() {
    document.getElementById("soma").onclick = soma;
    document.getElementById("subtracao").onclick = subtracao;
    document.getElementById("multiplicacao").onclick = multiplicacao;
    document.getElementById("divicao").onclick = divicao;

    function soma() {
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        document.getElementById("resultado").value = (n1 + n2);
    }

    function subtracao() {
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        document.getElementById("resultado").value = (n1 - n2);
    }

    function multiplicacao() {
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        document.getElementById("resultado").value = (n1 * n2);
    }

    function divicao() {
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        document.getElementById("resultado").value = (n1 / n2);
    }
}

您可以在

窗口顶部声明变量。onload

函数，如下所示：

window.onload = function() {
  var yourVariable;
}

您将能够在任何函数中使用此变量（

soma

、

subtracao

、

multipacao

和

divicao

）

以下是一个例子：

window.onload=function（）{
var yourVariable=“Value”；
函数testFunc（）{
log（变量）；
}
testFunc（）；
}

在

onclick

函数之外定义

n1

和

n2

变量：

window.onload = function() {
  document.getElementById("soma").onclick = soma;
  document.getElementById("subtracao").onclick = subtracao;
  document.getElementById("multiplicacao").onclick = multiplicacao;
  document.getElementById("divicao").onclick = divicao;

  var n1 = parseFloat(document.getElementById("n1").value);
  var n2 = parseFloat(document.getElementById("n2").value);

  function soma() {
    document.getElementById("resultado").value = (n1 + n2);
  }

  function subtracao() {
     document.getElementById("resultado").value = (n1 - n2);
  }

  function multiplicacao() {
    document.getElementById("resultado").value = (n1 * n2);
  }

  function divicao() {
    document.getElementById("resultado").value = (n1 / n2);
  }
}

现在，您应该为更改提供

n1

和

n2

侦听器：

document.getElementById("n1").onchange = n1Change;
document.getElementById("n2").onchange = n2Change;

function n1Change() {
  n1 = parseFloat(document.getElementById("n1").value);
}

function n2Change() {
  n2 = parseFloat(document.getElementById("n2").value);
}

要使变量对所有函数都可用，请在函数的封闭范围内声明它们，也就是说，在本例中，在页面就绪（已加载）事件处理程序的顶部声明它们

这充分的论证包括我在对问题的评论中提到的建议；它使用

DOMContentLoaded

事件而不是

onload

，并添加事件侦听器，其中

.onload=…

和

onclick=…

盲目分配事件处理程序，可能会替换现有的事件处理程序

这是一个完整的

.html

文件，您可以将其保存并加载到浏览器中：

<!DOCTYPE html>
<html>
<head>
    <title>SO 46457061</title>
    <script>
    document.addEventListener('DOMContentLoaded', function(event) {

        // Get the two number and one answer elements once and store them,
        // saving us from having to traverse the DOM every time.
        // Declaring these here makes them available to all code within
        // this anonymous event-listener function.
        var n1el = document.getElementById('n1');
        var n2el = document.getElementById('n2');
        var resultEl = document.getElementById('result');

        // Attach a click-event handler to each of the buttons,
        // providing an anonymous function as the handler.
        document.getElementById('soma')
                .addEventListener('click', function(e) {
                    e.preventDefault();
                    // Log just to demonstrate
                    console.log('n1 = ' + n1.value);
                    console.log('n2 = ' + n2.value);
                    // Compute
                    resultEl.innerText = '' +
                        (parseFloat(n1.value) +
                         parseFloat(n2.value));
                });

        document.getElementById('subtracao')
                .addEventListener('click', function(e) {
                    // Stop what normally happens on a button-click, and...
                    e.preventDefault();
                    // ...instead set the text of the answer to the computed value
                    // This performs the operation on the numbers, as numbers,
                    // but adds a string at the start to force the result to be
                    // a String. This is not strictly necessary, since assigning
                    // it to .innerText also converts to a String.
                    resultEl.innerText = '' +
                        (parseFloat(n1.value) -
                         parseFloat(n2.value));
                });

        document.getElementById('multiplicacao')
                .addEventListener('click', function(e) {
                    e.preventDefault();
                    resultEl.innerText = '' +
                        (parseFloat(n1.value) *
                         parseFloat(n2.value));
                });

        document.getElementById('divicao')
                .addEventListener('click', function(e) {
                    e.preventDefault();
                    resultEl.innerText = '' +
                        (parseFloat(n1.value) /
                         parseFloat(n2.value));
                });

    });
    </script>
    <style>
    button {
        height: 1.5em;
        width: 1.5em;
        font-size: 20px;
        margin-bottom: 5px;
    }
    section {
        display: inline-block;
    }
    </style>
</head>
<body>

    <section id="numbers">
        <label for="n1">First Number</label> <input type="text" id="n1" name="n1">  <br>
        <label for="n2">Second Number</label> <input type="text" id="n2" name="n2"> <br>
        <span class="result">Result: <span id="result">_</span></span>
    </section>

    <section id="operators">
        <button id="soma">&#x2b;</button>
        <button id="subtracao">&minus;</button>     <br>
        <button id="multiplicacao">&times;</button>
        <button id="divicao">&divide;</button>
    </section>

</body>
</html>

按钮{
高度：1.5em；
宽度：1.5em；
字体大小：20px；
边缘底部：5px；
}
部分{
显示：内联块；
}


第一个号码

第二个号码

结果:_
+；
&负的

&时代；
&划分；

您应该学习如何代替

window.onload=

-和

.onclick=