動態創建JavaScript並將其用於輸入type =「text」

Question

我創建了一個web應用程序，它可以通過輸入type =「text」。來更改元素.App包含動態創建的CSS並且工作正常。但是，動態創建的Javascript doesn沒有工作。如何在input type =「text」中啓用動態創建的腳本並在發短信時運行更改值？我想輸入document.body.style.color ='red';或提醒（「你好」）;並看到像CSS一樣的變化。

var a = document.createElement("style"); 
a.type = "text/css"; 
document.body.appendChild(a); 

var b = document.createElement("script"); 
b.type = "text/javascript"; 
document.body.appendChild(b); 

function changeBackgrounds() { 

    document.body.style.color = document.querySelector("#r").value; 
    document.body.style.fontStyle = document.querySelector("#r").value; 
    document.querySelector(".p").innerHTML = document.getElementById("r").value; 
    document.body.style.backgroundImage = document.querySelector("#r").value; 
    document.querySelector("video.video2").style.transition = document.querySelector("#r").value; 
    document.querySelector("video.video3").style.animation = document.querySelector("#r").value; 

    a.innerHTML = document.querySelector("#r").value; 
    b.innerHTML = document.querySelector("#r").value; 

    document.body.style.overflow = document.querySelector("#r").value; 
    document.body.style.textDecoration = document.querySelector("#r").value; 
    document.body.style.animation = document.querySelector("#r").value; 

} 

Answer 1

問：

我想的JavaScript輸入到輸入並立即執行。

以下是您要求的簡單版本，我認爲。

路線：

只需鍵入一些JavaScript到textarea的，看着它執行。例如輸入：textarea.style.borderColor = 'red';（不要複製&粘貼，輸入你想要的）。如果您願意，您可以改進語句檢測，正如我所說的，這是一個簡單的版本。

答：

var textarea = document.getElementById('textarea'); 
 

 
textarea.onkeydown = (e) => { 
 
    // Statement detection 
 
    if(e.keyCode === 186) { 
 
    execute(textarea.value); 
 
    } 
 
} 
 

 
function execute(text) { 
 
    var script = new Function(text); 
 
    return(script()); 
 
}

textarea { 
 
    height: 100px; 
 
    width: 200px; 
 
}

<textarea id="textarea"></textarea>