开发者社区> 问答> 正文

js里innerHTML问题,请教了谢谢

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style>
*{margin:0; padding:0;}
.main{width:300px; height:35px; border:4px #ccc solid; margin:auto; margin-top:200px;}
#left{font-size:16px; line-height:35px; color:#ccc; padding:0 10px; float:left;}
#right{float:right; cursor:pointer; margin-right:10px; color:white; font-size:16px; line-height:35px;}
#text1{font-size:16px; line-height:35px; color:black; border:0; outline:0;}
#queding{background:blue; padding:5px 5px; margin-right:5px;}
#quxiao{background:blue; padding:5px 5px;}
</style>
<script>
    var c;
    c=document.getElementById('left').innerHTML;
    function bianji(){
       var a=document.getElementById('left').innerHTML;
       document.getElementById('left').innerHTML="<input type='text' value="+a+" id='text1' />";
       document.getElementById('right').innerHTML=
               "<span id='queding' onclick='fanhui1()'>确定</span><span id='quxiao' onclick='fanhui2'>取消</span>";
    }
    function fanhui1(){
       var b=document.getElementById('text1').value;
       document.getElementById('left').innerHTML=b;
       document.getElementById('right').innerHTML="<img src='b-right.png' onclick='bianji()' />";
    }
    function fanhui2(){
       document.getElementById('left').innerHTML=a;
       document.getElementById('right').innerHTML="<img src='b-right.png' onclick='bianji()' />";
    }
</script>
</head>

<body>
<div class="main">
  <div id="left">
     火星人教育zaxlct
  </div>
  <div id="right">
     <img src="b-right.png" onclick="bianji()" />
  </div>
</div>
</body>
</html>

 var c;
 c=document.getElementById('left').innerHTML;
 为什么这一句会报错?我想实现,点击取消,然后返回编辑之前的值


展开
收起
小旋风柴进 2016-03-18 10:38:34 2539 0
1 条回答
写回答
取消 提交回答
  • 因为你在调用 innerHTML 的时候,DOM树还没有生成,你把整个script移到body前面就可以正常了

    2019-07-17 19:06:06
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载