单击按钮后，使用javascript（jQuery）将计算结果添加到范围

嗨，我在JQ写了一些东西，但我不确定是否正确：）所以希望你能帮我弄清楚怎么做

1.当用户单击按钮时（显示结果）

2.两个数字相加，结果显示在span#result中

3.如果文本框中未输入任何数字，则选中用户输入作为警告

请仅使用纯jQuery:） 提前感谢您的帮助。

---

在javascript中，在添加它们之前，需要将

$（'#num1'）

和

$（'#num2'）

转换为int或float，并使用

parseInt（）

或

parseFloat（）

。 此外，在html中，输入类型应该是数字，而不是文本

整个javascript功能应该更像这样

$(":button").click(function () {
    var num1 = $('#num1').val();
    var num2 = $('#num2').val();
    if (num1 == "" or num2 == "") alert("Please fill both inputs");
    else {
        var total = parseInt(num1) + parseInt(num2);
        $("span").text(total);
    }
}

您还可以做一些其他事情来优化代码，例如向按钮和跨度添加ID，但这超出了您的问题范围。

这里有一个小问题：

我为你分解了这个，希望你能从代码中学习！这篇文章的结尾将给你你想要的，但我已经说明了我们是如何做到这一点的

$(document).ready(function () { 
 // do whatever
});

代码的上述部分告诉计算机在加载文档时处理括号之间的内容

$(":button").click(function () { 
// do whatever
});

上面将所谓的“事件监听器”添加到任何标记为按钮的内容中，当该事件被触发时，它将在括号之间工作。在这种情况下，它是“单击”事件

你把这两个放在一起是正确的，就像这样：

$(document).ready(function () { 

  $(":button").click(function () { 
  // do whatever
  });

});

到目前为止，我们得到的是，当加载文档时，脚本会向标记为button的任何内容添加一个事件侦听器。它没有做任何事情（你会注意到“//做任何事情”只是一个注释），但我们肯定可以解决这个问题

单击后，我们希望从输入框中提取值

$(document).ready(function () { 

  $(":button").click(function () { 

  var num1 = $('#num1').val();
  var num2 = $('#num2').val();

  });

});

太好了！现在，当点击按钮时，它会提取输入并将其放入两个变量中，num1和num2。但是，当您提取输入时，您必须意识到从输入框中提取的是字符串。无法将字符串识别为可以添加。如果num1等于2，num2等于3，当你把它们加在一起而不是“5”，你会得到“23”。它们是串联的，而不是计算和。要改变这一点，我们必须将输入从字符串更改为整数。我们可以通过使用函数parseInt（）来实现这一点，该函数将读取一个字符串并返回一个整数

  $(document).ready(function () { 

  $(":button").click(function () { 

  var num1 = $('#num1').val();
  var num2 = $('#num2').val();
  var total = parseInt(num1) + parseInt(num2);
  });

});

最后我们得到了一个总数，我们所要做的就是把它放入span标签中

$(document).ready(function () { 

  $(":button").click(function () { 

  var num1 = $('#num1').val();
  var num2 = $('#num2').val();
  var total = parseInt(num1) + parseInt(num2);
  $("span").html(total);
  });

});

---

谢谢你们俩：）没问题！祝你好运

$(document).ready(function () { 

  $(":button").click(function () { 

  var num1 = $('#num1').val();
  var num2 = $('#num2').val();

  });

});

  $(document).ready(function () { 

  $(":button").click(function () { 

  var num1 = $('#num1').val();
  var num2 = $('#num2').val();
  var total = parseInt(num1) + parseInt(num2);
  });

});

$(document).ready(function () { 

  $(":button").click(function () { 

  var num1 = $('#num1').val();
  var num2 = $('#num2').val();
  var total = parseInt(num1) + parseInt(num2);
  $("span").html(total);
  });

});