我正在尝试将代码编辑器添加到我的网站,但是结果框中什么都没有显示。
我尝试使用.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>
答案 0 :(得分: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>
答案 1 :(得分:0)
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>