ブログパーツとか: JavaScriptシミュレータ（コードペンもどき）

CSS（記入欄）　

HTML（記入欄）　

JavaScript（記入欄）　

CSS

#simulatorDisplay{border:1px solid;min-height:300px;}
#simulatorTextarea{display:flex;flex-wrap:wrap;justify-content:space-between;}
#simulatorTextarea div{width:32%;}
#simulatorTextarea textarea{height:300px;width:100%;font-family:monospace;}

HTML

<div id="simulatorDisplay">
<div id="codeDisplay_css"></div>
<div id="codeDisplay_html"></div>
<div id="codeDisplay_js"></div>
</div><br />

<div id="simulatorTextarea">
<div>CSS（記入欄）　<input type="button" onClick="codeSimulator_css();codeSimulator_html();codeSimulator_js();" value="適用"><br />
<⚠textarea id="codeTextarea_css">
<⚠/textarea>
</div>
<div>HTML（記入欄）　<input type="button" onClick="codeSimulator_css();codeSimulator_html();codeSimulator_js();" value="適用"><br />
<⚠textarea id="codeTextarea_html">
<⚠/textarea>
</div>
<div>JavaScript（記入欄）　<input type="button" onClick="codeSimulator_css();codeSimulator_html();codeSimulator_js();" value="適用"><br />
<⚠textarea id="codeTextarea_js">
<⚠/textarea><!--⚠は削除する-->
</div>
</div>

JavaScript

<script>
var codeSimulator_css=function(){
    var style=document.createElement('style');
    style.innerHTML=document.getElementById("codeTextarea_css").value;
    document.getElementById("codeDisplay_css").appendChild(style);
   }
var codeSimulator_html=function(){
    document.getElementById("codeDisplay_html").innerHTML=document.getElementById("codeTextarea_html").value;
   }
var codeSimulator_js=function(){
    var script=document.createElement('script');
    script.innerHTML=document.getElementById("codeTextarea_js").value;
    document.getElementById("codeDisplay_js").appendChild(script);
   }
</script>

2020年4月13日月曜日

JavaScriptシミュレータ（コードペンもどき）