javascript - 使用 javascript 更改 HTML 按钮的值

Question

我制作了一个脚本，其中包含一个更改按钮值的函数。
该按钮位于 html 代码中的同一文档中。
问题是按钮的值不会改变。
你能帮我修一下吗？

这是代码：

function changeCounting(){
    var element = document.getElementById("counting");
    if(element.value == '+')element.value = '-';
    else if(element.value == '-')element.value = '*';
    else if(element.value == '*')element.value = '/';
    else element.value = '+';
}

这是表单中按钮的代码

<form>
    <input type="text" id="tal1"></input>
    <input type="button" id="counting" onclick="changeCounting()" value='+'></input>
    <input type="text" id="tal2"></input>
    <input type="button" id="equals" onclick="calc()" value="Enter"></input>
</form>

编辑：问题是我在 HTML 代码之后启动了脚本。

Answer 1

如果您可以使用 jQuery，那么这里是所需的代码：

HTML

<form>
    <input type="text" id="tal1" />
    <input type="button" id="counting" value='+'/>
    <input type="text" id="tal2" />
    <input type="button" id="equals" onclick="calc()" value="Enter"/>
</form>

JavaScript

$(function(){

    function changeCounting(){
        var element = document.getElementById("counting");
        if(element.value == '+')element.value = '-';
        else if(element.value == '-')element.value = '*';
        else if(element.value == '*')element.value = '/';
        else element.value = '+';
    }

    $('#counting').on('click', changeCounting)
})

http://jsfiddle.net/dAJTt/

Answer 2

这段代码看起来更简单易读。请检查这个工作示例

function changeCounting(){
  var operationsMap = {
  '+' : '-',
  '-' : '*',
  '*' : '/',
  '/' : '+'
  };

  var element = document.getElementById('counting');
  element.value = operationsMap[element.value];
}

笔记：-

1. 当元素存在于 DOM 中时，请确保您的事件绑定已完成。如果您使用的是 jQuery，那么您可以在document.ready()方法中进行绑定。我这样说是因为我们不应该混合 Content(HTML)、Presentation(CSS)、Behavior(JS)。这被认为是最佳实践。所以我建议在javascript中绑定你的处理程序。

2. 请验证您的 HTML。有许多在线工具可以验证您的 HTML。

Answer 3

function changeCounting(){
    var element = document.getElementById("counting");
    if (element.value == '+'){ element.value = '-'; }
    else if (element.value == '-'){ element.value = '*'; }
    else if(element.value == '*'){ element.value = '/'; }
    else { element.value = '+'; }
}