I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I want the prompt text to be displayed within an h1 element. I tried using the line of code "newDiv.style = "h1";" but it did not work as expected. Can someone assist me with this problem?
Here is the code snippet:
window.onload = function() {
var x = document.getElementById("div1");
x.onclick = function() {
var mvytext = prompt("Enter text");
var parent = mvytext.parentNode;
var newDiv = document.createElement("div");
newDiv.id = "myNewDiv";
newDiv.className = "cdiv1";
newDiv.style = "h1";
var txt = document.createTextNode(mvytext);
newDiv.appendChild(txt);
var beforeMe = document.getElementsByTagName("div")[0];
document.body.insertBefore(newDiv, beforeMe);
}
}#div1 {
background-color: yellow;
}
.cdiv1 {
background-color: #bdefb8;
width: 50%;
height: 100px;
padding: 10px;
margin: 10px 0;
border: 4px solid;
border-color: red;
}<div style="width: 50%;height: 100px;padding: 10px;margin: 10px 0" id="div1">
<h1>Click me to add a new movie. </h1>
</div>