Question

我正在尝试使用javascript制作一个简单的计算器，但是当我点击按钮＆＃39; =＆＃39;结果没有出现。

    <!DOCTYPE html>
<html>
    <body>
        <h1> Kalkulator Sederhana</h1>
            <input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama">
            <input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua">
        <button id="hasil" onclick="tambah">=</button>

        <h2 id="hsl"></h2>

        <script>
            var a = document.getElementById('angkapertama').value;
            var b = document.getElementById('angkakedua').value;
            var c = document.getElementById('hasil');
            c.addEventListener('click', tambah, false);

            function tambah() {
                return a + b;
                document.getElementById("hsl").innerHTML = tambah; 
            }
        </script>
    </body>
</html>

Answer 1

这个

的一些问题

1）在用户有机会输入任何内容之前，从文本框中收集输入值。您需要在事件处理程序中执行此操作。

2）内联事件属性（在没有()的情况下错误地定义）和在代码中添加了一个eventlistener。只需要一个。 eventListener通常被认为是更好的方式，例如代码可维护性和可见性。

3）将值作为字符串而非数字处理（例如，如果代码已经正常工作，＆＃34; 4＆＃34; +＆＃34; 4＆＃34;将返回＆＃34; 44＆＃34 ;！）

4）从实际显示结果的行之前的tambah（）函数返回。 return从函数返回，它不仅仅是为了获得计算结果。

此版本更正了所有这些错误。你可以运行它来测试它：

＆＃13;

var c = document.getElementById('hasil');
c.addEventListener('click', tambah, false);

function tambah() {
  var a = document.getElementById('angkapertama').value;
  var b = document.getElementById('angkakedua').value;
  var sum = parseFloat(a) + parseFloat(b);
  document.getElementById("hsl").innerHTML = sum;
}

＆＃13;

<h1> Kalkulator Sederhana</h1>
<input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama">
<input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua">
<button id="hasil">=</button>

<h2 id="hsl"></h2>

＆＃13;

Answer 2

一个简单的例子

var c = document.getElementById('hasil');
c.addEventListener('click', tambah, false);

function tambah() {
    var a = document.getElementById('angkapertama').value;
    var b = document.getElementById('angkakedua').value;
  
    var sum = Number(a) + Number(b); //or
    // var sum = parseFloat(a) + parseFloat(b);
    document.getElementById("hsl").innerHTML = sum;
    console.log(sum)
 }

<h1> Kalkulator Sederhana</h1>
<input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama">
<input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua">
<button id="hasil">=</button>

<h2 id="hsl"></h2>

但是，addEventListener（）函数尽管是标准的，但在旧浏览器（版本9以下的Internet Explorer）中不起作用，这是另一个很大的区别。如果您需要支持这些古老的浏览器，则应遵循onclick方式。

HTML：

<button id="hasil" onclick="tambah()">=</button>

SCRIPT：

function tambah() {
    var a = document.getElementById('angkapertama').value;
    var b = document.getElementById('angkakedua').value;

    var sum = Number(a) + Number(b); //or
    // var sum = parseFloat(a) + parseFloat(b);
    document.getElementById("hsl").innerHTML = sum;
    console.log(sum)
 }

内容来源here

Answer 3

您的代码有一些不正确之处。

当你返回一个+ b时，在该返回语句之后没有执行任何代码。

我稍微更改了代码，现在在函数内部定义了变量a和b，并确保在a和b上使用parseInt - 否则它们最终将被连接为字符串（意思是1 + 2将是12 - 错误！）

＆＃13;

var c = document.getElementById('hasil');
c.addEventListener('click', tambah);

function tambah() 
{
    var a = parseInt(document.getElementById('angkapertama').value);
    var b = parseInt(document.getElementById('angkakedua').value);
    var result = a + b;
    document.getElementById("hsl").innerHTML = result; 
}

＆＃13;

    <!DOCTYPE html>
<html>
    <body>
        <h1> Kalkulator Sederhana</h1>
            <input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama">
            <input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua">
        <button id="hasil">=</button>

        <h2 id="hsl">answer here</h2>
    </body>
</html>

＆＃13;

Answer 4

试试这个：

 <!DOCTYPE html>
    <html>
        <body>
            <h1> Kalkulator Sederhana</h1>
                <input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama">
                <input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua">
            <button id="hasil" onclick="tambah()">=</button>

            <h2 id="hsl"></h2>

            <script>
                var a = document.getElementById('angkapertama').value;
                var b = document.getElementById('angkakedua').value;
                var c = document.getElementById('hasil');
                c.addEventListener('click', tambah, false);

                function tambah() {
                    var sum = a + b;
                    document.getElementById("hsl").innerHTML = sum; 
                }
            </script>
        </body>
    </html>

当我点击按钮＆＃39; =＆＃39;时，没有任何事情发生

4 个答案: