我正在尝试制作代码编辑器，但是结果框中什么也没有出现

Question

我正在尝试向我的网站添加代码编辑器，但是结果框中什么也没有显示。

我尝试使用.innerHTML提取代码，并将其放在结果框中，但是什么也没出现。

<!DOCTYPE html>
<body>
<textarea id='codeBox'>
  <!DOCTYPE html>
    <html>
      <body>

      </body>
    </html>
</textarea>
<div id='result'></div>
<button onclick='run()' style='text-align: center;'>Run</button>
<style>
body {
display: grid;
grid-columns: 50% 50%;
}

#codeBox {
grid-column: 1;
height: 500px;
overflow: scroll;
}

#result {
grid-column: 2;
height: 500px;
overflow: scroll;
border: 1px solid gray;
}
</style>
<script>
let codeBox = document.getElementById('codeBox').innerHTML;
let result = document.getElementById('result').innerHTML;
function run() {
result.innerHTML = codeBox.innerHTML;
};
</script> 
</body>

Answer 1

您应该使用textarea值，并且每次单击运行时都应该读取该值，而不仅是在加载页面时。

 function run() { result.innerHTML = document.getElementById('codeBox').value; }; 

 body { display: grid; grid-template-columns: 50% 50%; } #codeBox { grid-column: 1; height: 500px; overflow: scroll; } #result { grid-column: 2; height: 500px; overflow: scroll; border: 1px solid gray; } 

 <textarea id='codeBox'> <!DOCTYPE html> <html> <body> It works! </body> </html> </textarea> <div id='result'></div> <button onclick='run()' style='text-align: center;'>Run</button> 

Answer 2

将innerhtml起飞到下面的变量并执行

let codeBox = document.getElementById('codeBox').innerHTML;
let result = document.getElementById('result').innerHTML;

修改后的代码

    <script>
    let codeBox = document.getElementById('codeBox');
    let result = document.getElementById('result');
    function run() {
    result.innerHTML = codeBox.innerHTML;
    };
   </script>

链接

https://code.sololearn.com/Ws6DW8hp6XS5