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

此代码看起来更简单易读。请查看此working example

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

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

注： -

确保在DOM中存在元素时完成事件绑定。如果您使用的是jQuery，那么您可以使用document.ready()方法进行绑定。我这样说是因为我们不应该混合使用内容（HTML），演示文稿（CSS），行为（JS）。这被认为是最佳做法。所以我建议用javascript绑定你的处理程序。
请验证您的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 = '+'; }
}

使用javascript更改HTML按钮的值

3 个答案:

HTML

的JavaScript