admin管理员组

文章数量:1410706

I'm trying to modify the innerHTML of a particular div, but I cannot get to erase the content of that div. I have the following code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script type="text/javascript">
            function reset() {
                document.getElementById("results").innerHTML = "";
            }
            function check () {
                document.getElementById("results").innerHTML = "foo";
            }
        </script>
        <form name="form1">
            <input type="button" value="Check" onclick="check();">
            <input type="button" value="Reset" onclick="reset();">
        </form>
        <div id="results"></div>
    </body>
</html>

Can anyone point out where I'm doing it wrong?

Thanks in advance.

I'm trying to modify the innerHTML of a particular div, but I cannot get to erase the content of that div. I have the following code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script type="text/javascript">
            function reset() {
                document.getElementById("results").innerHTML = "";
            }
            function check () {
                document.getElementById("results").innerHTML = "foo";
            }
        </script>
        <form name="form1">
            <input type="button" value="Check" onclick="check();">
            <input type="button" value="Reset" onclick="reset();">
        </form>
        <div id="results"></div>
    </body>
</html>

Can anyone point out where I'm doing it wrong?

Thanks in advance.

  • javascript
  • html
Share Improve this question edited Jun 3, 2013 at 10:34 Denys Séguret 383k90 gold badges811 silver badges776 bronze badges asked Jun 1, 2013 at 17:23 user2064000user2064000 3
  • Are you getting any javascript errors in your console? – Phil Cross Commented Jun 1, 2013 at 17:25
  • Please get habituated to use $('div#id_name') instead of 'getElementById`. Only thing will be required is to add the jQeury Plugin. but it will help you a lot in future when you will use Js more. – MaNKuR Commented Jun 1, 2013 at 17:36
  • 3 @MaNKuR It's perfectly acceptable to not import jQuery in all your sites. It's not so light after all. – Denys Séguret Commented Jun 1, 2013 at 17:40
Add a ment  | 

2 Answers 2

Reset to default 7

That's because there's already a reset function in the form and this function is called instead of your own. Change that name and it will work.

    <script type="text/javascript">
        function r2() {
            document.getElementById("results").innerHTML = "";
        }
        function check () {
            document.getElementById("results").innerHTML = "foo";
        }
    </script>
    <form name="form1">
        <input type="button" value="Check" onclick="check();">
        <input type="button" value="Reset" onclick="r2();">
    </form>
    <div id="results"></div>

Demonstration

This kind of problem is one more reason to avoid inline function calls. A preferred way would be

 <form name="form1">
        <input type="button" value="Check" id=check>
        <input type="button" value="Reset" id=reset>
 </form>
 <div id="results"></div>
 <script type="text/javascript">
       document.getElementById("reset").onclick = function() {
            document.getElementById("results").innerHTML = "";
       }
       document.getElementById("check").onclick = function(){  
           document.getElementById("results").innerHTML = "foo";
       }
</script>

Give

onclick="window.reset();"

本文标签： javascriptCan39t modify innerHTML of a divStack Overflow

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