Question

我认为我的逻辑部分正确，我遇到的另一个问题是当我点击<button>标签时我一直收到的NaN输出。我确实使用了addEventListener（'click'）方法，但它似乎更复杂，所以我尝试了这个简单的代码。我只是在如何添加按钮的值时遇到麻烦，任何帮助都会受到赞赏。

这是我的代码：

<html>


<body>

<script type = "text/javascript">

 function test(value)
{
    var val = parseFloat(value);
    var total = parseInt(document.getElementById('totaltext').value);

    document.getElementById('totaltext').innerHTML =  total + val;
} 

</script>


total : <p id = "totaltext" value = "0">0</p>
<button value = "10.11" name = "product" id = "button1" onClick = "test(this.value);">value1</button>


<button value = "20.00" name = "product" id = "button2" onClick = "test(this.value);">value2</button>



</body>
</html>

https://jsfiddle.net/7tm161ob/1/

Answer 1

由于您访问的元素button不是输入标记，因此value属性不正确。在这种情况下，value被视为html属性，在JavaScript对象中无法直接使用。

您需要使用方法.getAttribute()来获取这些值。这是它的工作原理。

<button value="10.11" name="product" id="button1" onclick="test(this);">value1</button>

<button value="20.00" name="product" id="button2" onclick="test(this);">value2</button>

function test(button) {
    var val = parseFloat(button.getAttribute("value"));
    var total = parseFloat(document.getElementById('totaltext').getAttribute("value"));

    document.getElementById('totaltext').innerHTML =  total + val;
    document.getElementById('totaltext').setAttribute("value",total + val)
}

Working Example

如何基本添加两个<button>标签的值

1 个答案: