单击按钮时，使用Javascript调用并返回值

Use Javascript to call and return a value when a button is clicked

本文关键字：调用 返回值 Javascript 使用 按钮 单击      更新时间：2023-09-26

我正在努力完成以下任务，但我不知道为什么我会挣扎。创建一个新的小提琴，其中包含一个文本为"x2"的按钮和数字1，如下所示：

1x2

使用Javascript进行设置，以便每次单击按钮时，x2按钮上方的数字将加倍。把小提琴的链接发给我。

以下是我迄今为止所掌握的信息。我知道我是通过JS瞄准按钮的，但我不知道如何在点击x2按钮时返回更新后的值。

<p id="counter">1</p>
<button onclick="calc()">x2</button>
<script>
function calc() {
    var element = document.getElementById("counter") *2;
    return counter.innerHTML = element;
}
</script>

看看这个代码在做什么：

var element = document.getElementById("counter") *2;

你是在把一个元素乘以二，你不是在阅读文本。

您要使用innerHTML或textContent。这将返回一个字符串，因此您希望使用parseInt()或parseFloat()。

不要返回，任何东西都不会读取您的返回。将其放回counter元素中。此外，document.getElementById("counter") *2将给您NaN，因为您正在将Element对象乘以一个数字；您需要处理.textContent值，它是一个字符串（在对执行算术运算时将自动转换为数字）。

这就是您需要做的：

calc()函数需要对发生变化的元素的innerHTML进行寻址。然后，需要将相同innerHTML的乘积分配给它，但它需要首先转换为数字。没有其他内容——没有return语句或任何内容。

这个片段包含了执行它的代码（隐藏，因为剧透，尽管无论如何都太晚了）：

function calc(){
  document.getElementById('counter').innerHTML=Number(document.getElementById('counter').innerHTML)*2;
}
<p id="counter">1</p>
<button onclick="calc()">x2</button>

试试这个：

function calc() {
    var newvalue = parseInt(document.getElementById("counter").innerHTML) * 2;
    alert(newvalue);
}

innerHTML实际上返回字符串而不是数字，因此要将其转换为数字，我们需要调用parseInt():

<p id="counter">1</p>
<button onclick="calc()">x2</button>
<script>
   function calc() {
      var element = parseInt(document.getElementById("counter").innerHTML) * 2;
   return counter.innerHTML = element;
}

相关文章：