js里innerHTML问题,请教了谢谢-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

js里innerHTML问题,请教了谢谢

小旋风柴进 2016-03-18 10:38:34 1887
<!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;
 为什么这一句会报错?我想实现,点击取消,然后返回编辑之前的值


html问题 .html问题 line问题
分享到
取消 提交回答
全部回答(1)
  • lflf
    2019-07-17 19:06:06

    因为你在调用 innerHTML 的时候,DOM树还没有生成,你把整个script移到body前面就可以正常了

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题
推荐课程