+ 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?

code editor js help

11th Apr 2021, 12:50 PM

Սոֆի

8 ответов

+ 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

11th Apr 2021, 3:57 PM

Սոֆի

+ 3

ŚĄŃ [Exams] XXX Thank you soooo much😀 You two help me a lot😆

14th Apr 2021, 8:09 AM

Սոֆի

+ 2

https://code.sololearn.com/W7x2q7ecPgoh/?ref=app

13th Apr 2021, 10:46 AM

SAN

+ 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

11th Apr 2021, 3:10 PM

XXX

+ 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.

11th Apr 2021, 4:13 PM

XXX

+ 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.

13th Apr 2021, 11:00 AM

XXX

+ 1

XXX You are right Do you have any idea to fix it

13th Apr 2021, 11:09 AM

SAN

+ 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

13th Apr 2021, 1:55 PM

XXX