admin管理员组

文章数量:1401256

I am trying to build a simple calculator with Javascript and Im having issues when clearing display content.

Can someone please have a look at my code and let me know why it is not working.

Why won't setting the display value to an empty string work. What am I doing wrong? Tank you guys.

function testing(button){
  var x = button.value;
  document.getElementById("display").innerHTML+=x;
}

function clear() {
  document.getElementById("display").innerHTML = "";
 }
<body>
    <input type="button" id="one" value="1" onClick="testing(this)">
    <input type="button" id="one" value="2" onClick="testing(this)">
    <input type="button" id="one" value="3" onClick="testing(this)">
    <input type="button" id="clear" value="clear" onClick="clear()">

    <h1 id="display"></h1>
  </body>

I am trying to build a simple calculator with Javascript and Im having issues when clearing display content.

Can someone please have a look at my code and let me know why it is not working.

Why won't setting the display value to an empty string work. What am I doing wrong? Tank you guys.

function testing(button){
  var x = button.value;
  document.getElementById("display").innerHTML+=x;
}

function clear() {
  document.getElementById("display").innerHTML = "";
 }
<body>
    <input type="button" id="one" value="1" onClick="testing(this)">
    <input type="button" id="one" value="2" onClick="testing(this)">
    <input type="button" id="one" value="3" onClick="testing(this)">
    <input type="button" id="clear" value="clear" onClick="clear()">

    <h1 id="display"></h1>
  </body>

  • javascript
  • html
  • calculator
  • innerhtml
Share Improve this question edited Oct 13, 2017 at 8:36 Ole Haugset 3,8073 gold badges26 silver badges48 bronze badges asked Oct 13, 2017 at 7:17 Kingsfull123Kingsfull123 5031 gold badge6 silver badges12 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

Your method name is conflicting with the id value, just change it to clear1 and it should work.

       function testing(button){
        var x = button.value;
        document.getElementById("display").innerHTML+=x;
        }

       function clear1(){
        document.getElementById("display").innerHTML = "";
       }
<body>
    <input type="button" id="one" value="1" onClick="testing(this)">
    <input type="button" id="one" value="2" onClick="testing(this)">
    <input type="button" id="one" value="3" onClick="testing(this)">
    <input type="button" id="clear" value="clear" onClick="clear1()">

    <h1 id="display"></h1>
    </body>

The problem is that there is a document.clear function which is taking precedence over your original call. You can test this by typing document.clear into the console.

Try renaming your function to clearDisplay.

function testing(button){
    var x = button.value;
    document.getElementById("display").innerHTML+=x;
}

function clearDisplay(){
    document.getElementById("display").innerHTML = "";
}
<body>
    <input type="button" id="one" value="1" onClick="testing(this)">
    <input type="button" id="one" value="2" onClick="testing(this)">
    <input type="button" id="one" value="3" onClick="testing(this)">
    <input type="button" id="clearDisplay" value="clear" onClick="clearDisplay()">

    <h1 id="display"></h1>
</body>

本文标签： htmlJavascript calculator simple clear feature not workingStack Overflow

版权声明：本文标题：html - Javascript calculator simple clear feature not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744297849a2599431.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。