New course! Every coder should learn Generative AI!
Try a free lesson+ 5
Hi! Please help me with code!
https://code.sololearn.com/Wa9a14a23A0a/?ref=app If I click on run it only work one time and js doesn't work after this. How solve it? ŚĄŃ [Exams] You say me add run I added it but click on run two or more times it doesn't will work. Can you help me?
8 Answers
+ 4
XXX I make code editor, and in it my html and css works fine js first time too but second... time it doesn't work
+ 3
ŚĄŃ [Exams] XXX Thank you soooo much😀
You two help me a lot😆
+ 1
You are putting the value of the HTML code into the div with id "output". This means when you run on click, the structure of the div will be something like this
<div id="output" class="....">
<html>
<head>
.......
</html>
</div>
You can't do this. You can't just have a <html> tag inside of a div. It will change the structure of the DOM in ways you don't want (just try alerting or logging `document.documentElement.innerHTML` after the run button is clicked)
I don't know if this is the best solution, but what you can do is have an iframe which will serve as your output screen. By using
<iframe-object>.contentWindow.document.write(your-code)
You can change the content of the iframe to the output you want
Example:
https://code.sololearn.com/WF7u5cT1A8m9/?ref=app
Source of the iframe part of my answer:
https://stackoverflow.com/questions/10418644/creating-an-iframe-with-given-html-dynamically/10433550#10433550
+ 1
Sofi (DM Closed❌)
I know. That's what I said. The problem is that you're putting the HTML code in the div#output.innerHTML. This means that you sre actually putting a <html> tag inside a div, which is not allowed. The browser will change the structure of the DOM to prevent that (I don't exactly know how it will be changed). That is why your code doesn't run more than once.
The solution I gave was to use an iframe, which seems to be working if you look at the code I attached in my previous answer.
+ 1
ŚĄŃ [Exams] your solution is not viable. You are changing the CSS and JS of the whole document, which can cause name conflicts and the user might end up changing JS variables that they didn't even declare. Or, the user might have an element with id or class that is already present and they might end up changing the styles of the editor itself through the CSS.
Just try putting this in CSS (after running the code)
```
#run {
color: #000;
background-color: #000;
border-radius: 0
}
```
And press the blue "Run" button. It will change the style of the run button.
+ 1
XXX You are right
Do you have any idea to fix it
+ 1
ŚĄŃ [Exams] The solution I gave doesn't encounter this problem (though there can certainly be a better solution than mine). Here's Sofi (DM Closed❌) 's code using iframe
https://code.sololearn.com/W8t3yclV5elY/?ref=app
Often have questions like this?
Learn more efficiently, for free:
Hot today
Problem
0 Votes
USING HTML ONLY!!!
4 Votes
Why is the result always 0?
1 Votes
Game Devolopment with JS
0 Votes