Question

<style>
*
{
    margin:0;
    padding: 0;
}
textarea
{
    resize: none;
    padding: 10px;
    height: 100px;
    width: 50%;
}
#output
{
    height: 100px;
    width: 50%;
    color: #fff;
    background-color: #222;
}
</style>

<style id="customstyle">
</style>

<script type="text/javascript">

function togglehtml()
{
    document.getElementById('inputboxcss').style.display = "none";
    document.getElementById('inputboxjs').style.display = "none";
    document.getElementById('inputboxhtml').style.display = "";
}
function togglecss()
{
    document.getElementById('inputboxhtml').style.display = "none";
    document.getElementById('inputboxjs').style.display = "none";
    document.getElementById('inputboxcss').style.display = "";
}
function togglejs()
{
    document.getElementById('inputboxcss').style.display = "none";
    document.getElementById('inputboxhtml').style.display = "none";
    document.getElementById('inputboxjs').style.display = "";
}

setInterval(function updatehtml()
{
    var x=document.getElementById("inputboxhtml");
    var y=document.getElementById("output");
    y.innerHTML = x.value;
},100);
setInterval(function updatecss()
{
    var x=document.getElementById("inputboxcss");
    var y=document.getElementById("customstyle");
    y.innerHTML = x.value;
},100);
setInterval(function updatejs()
{
    var x=document.getElementById("inputboxjs");
    var y=document.getElementById("customscript");
    y.innerHTML = x.value;
},100);

</script>

<script id="customscript" type="text/javascript">
</script>

<button id="togglehtml" onclick="togglehtml()">HTML</button>
<button id="togglecss" onclick="togglecss()">CSS</button>
<button id="togglejs" onclick="togglejs()">JS</button>
<div id="inputhtml">
    <textarea id="inputboxhtml" onkeypress="updatehtml()"></textarea>
</div>
<div id="inputcss">
    <textarea id="inputboxcss" onkeypress="updatecss()"></textarea>
</div>
<div id="inputjs">
    <textarea id="inputboxjs" onkeypress="updatejs()"></textarea>
</div>
<div id="output"></div>

enter image description here

输出窗口......附在哪里 firstblock动态HTML 第二块动态css 第三块动态javascript 和第四个块输出窗口......我想要像jsFiddle。但javascript无法正常工作，html css正在运行

Answer 1

您可以在4 ways to dynamically load external JavaScript(with source)

找到答案

我制作了添加脚本功能的修改版本：

function updatejs()
{
    var x=document.getElementById("inputboxjs");
    addScript("customscript", x.value);
}
function addScript(id, script){
    var headElement = document.getElementsByTagName('HEAD').item(0);
    var oldScriptElement = document.getElementById(id);
    if(oldScriptElement)
        headElement.removeChild(oldScriptElement);
    var scriptElement = document.createElement( "script" );
    scriptElement.type = "text/javascript";
    scriptElement.id = id;
    scriptElement.appendChild(document.createTextNode(script));
    headElement.appendChild( scriptElement);
}

本文中未提及的另一种方法是创建一个函数对象，然后调用它，为自定义脚本提供自己的范围：

function updatejs()
{
  var x=document.getElementById("inputboxjs");
  var scriptFnc = new Function(x.value);
  scriptFnc();
}

最后一件事，在setInterval调用中为你的函数命名是毫无意义的。

无法使用动态HTML访问动态更改的JavaScript

1 个答案: