程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> javascript-JS裡innerHTML問題，請教了謝謝

javascript-JS裡innerHTML問題，請教了謝謝

編輯：編程綜合問答

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;
 為什麼這一句會報錯？我想實現，點擊取消，然後返回編輯之前的值

最佳回答：

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>