zaxlctjs 2015-07-11 07:41 采纳率: 81%
浏览 1579
已采纳

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;
 为什么这一句会报错？我想实现，点击取消，然后返回编辑之前的值
  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2015-07-11 08:16
    关注

    script放到left对象下面，要不对象还没生成获取不到，里面还有部分错误，取消的onclick事件没有执行

         <div class="main">
        <div id="left">
            火星人教育zaxlct
        </div>
        <div id="right">
            <img src="b-right.png" onclick="bianji()" />
        </div>
    </div>
    <script>
        var c;
        c = document.getElementById('left').innerHTML;
        function bianji() {
           c = document.getElementById('left').innerHTML;/////
            document.getElementById('left').innerHTML = "<input type='text' value=" + c + " 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;//这里a变量也没有定义，是c吧
            document.getElementById('left').innerHTML = c;//这里a变量也没有定义，是c吧
            document.getElementById('right').innerHTML = "<img src='b-right.png' onclick='bianji()' />";
        }
    </script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js，页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？