Javascipt problem.

[Infinityhost]

Hello I have a problem with such thing. The HTML code is "
<button>Pobranie</button><button>Zapisz</button><button>Kasowanie</button>

<DIV>dddd</DIV>"

Script is :
let u;
function pobierz(){let i=prompt("Jaka nazwa?");return i;};
function wyswietl(nowa){document.querySelectorAll("DIV")[0].innerHTML=nowa;};
function wyczysc(){document.querySelectorAll("DIV")[0].innerHTML="";};

document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=pobierz()");
document.querySelectorAll("BUTTON")[1].setAttribute("onClick","wyswietl(u);");
document.querySelectorAll("BUTTON")[2].setAttribute("onClick","wyczysc()");

The first function works fine,it takes a value from a prompt window.
The third one also -it clears DIV.
Problem is with the second - it doe's nothing, when I put an alert() into setAttribute - setAttribute("onClick","alert();wyswietl(u);"); it shows alert but doesn't change the DIV element.

I use eval function on iframe content.
Any suggestions?

 

[Infinityhost]

The HTML code is "
<button>Get value </button><button>Write DIV</button><button>Clear DIV</button>

<DIV>dddd</DIV>"

Script is :
let u;
function get_div(){let i=prompt("What value?");return i;};
function show_div(now){document.querySelectorAll("DIV")[0].innerHTML=now;};
function clear_div(){document.querySelectorAll("DIV")[0].innerHTML="";};

document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=get_div()");
document.querySelectorAll("BUTTON")[1].setAttribute("onClick","show_div(u);");
document.querySelectorAll("BUTTON")[2].setAttribute("onClick","clear_div()");

The first function works fine,it takes a value from a prompt window.
The third one also -it clears DIV.
Problem is with the second - it doe's nothing, when I put an alert() into setAttribute - setAttribute("onClick","alert();show_div(u);"); it shows alert but doesn't change the DIV element.

I use eval() function on iframe (content from window.top.textarea.value).
Any suggestions?

 

[MeMate]

Sorry to be strict. But please put your code in code tags. Hard to read right now, and i wont read it that way.

EDIT:
I had a look on it. It should work though.

First Button = PROMPT.
Second button = Value in div
Thrird button = clear div.

What exactly isn't working?

 

[Infinityhost]

I will start from the beginning. I create a string from 3 textarea fields(one with HTML code, one with CSS and one with script(with some functions). Then I'm writing it into iframe element by using srcdoc. And when i create content which looks like the one I wrote on my first and seconda posts everything works fine BUT the function that should override DIV innerHTML. When I try to clear it's content, I have no problems. When I insert an alert () before show_div() it shows alert but then does nothing after. In the created string content I also add function(src){eval(src);}; so I can operate on iframe content.

 

[Infinityhost]

The webpage I'm working on is infinityhost cba pl.

 

[MeMate]

I can't find any issues. I've put it into a fiddle. https://jsfiddle.net/6mng1spw/ Works to me. I don't get your problem. Sorry.

 

[Infinityhost]

In the windows.top it works fine but I use it in a iframe element with srcdoc. No it doesn't work the way i need it. Please , add textarea (with the code which we are talking about) to this jsfiddle then iframe element and write textarea.value to srcdoc and then eval(the code from textarea.value). This is what I'm talking about.

 

[MeMate]

JS Fiddle can't iframes. BUT.

The way to access iframes JS is by using "parent".


IFRAME File

<textarea style="width:100px; height; 100px;" id="mytextarea"></textarea><button id="setToParent">Do something on main</button>
<script>
document.getElementById('setToParent').onclick=function(){
         parent.dosomething(document.getElementById('mytextarea').value);
}
</script>

And on the HTML that contains the iframe (so parent)

function dosomething(val){
         alert(val);
}

 

[Infinityhost]

You wrote IFRAME file: (I don't use any file just create content "on demand" let's say - but it doesn't metter) but textarea is in the window.top. I don't need to operate on the main window(window.top) from the iframe content, not in this case. In the window.top I have a button that works this way -(so parent)

onClick="iframe.contentWindow.run_script(window.top.textarea.value);"

AND (IFRAME file as You said)

iframe.contentWindow.run_script=function(src){eval(src);}

 

[MeMate]

Sorry i don't get it. Maybe someone else does.

 

[Infinityhost]

All I wants is to operate on the content of an iframe element, using buttons placed in windows.top. Sometimes I need to make some changes in this iframe and source of commands is textarea(in the window.top). If You only open the website I'm creating, You would understand everything.
infinityhost cba pl.

All the buttons and sources are at the right się od the windows.
Code that should be written into "Script" textarea is in the left window.

 

[MeMate]

Well as i wrote (my code was an example only), use "parent". Doesen't matter if you use a file or not. You are using a iframe. From iframe to parent you need to use parent. PERIOD.

If this is not helping you, please add all relevant code in here (within code tags) or simple it down (prefered) and post that here. So we may check for our selfes or even maybe see whats going wrong on first view.

That's your options.

 

[Infinityhost]

The problem is simple.
All the code You need to know is at the top of our conversation.
Function first CLEARS the div element(I have access to it)
Function second, very similar to the previous one, DOESN'T change the div element(I don't have access to it).
That's ALL.
Which part of this two sentences You don't understand?

 

[MeMate]

The problem is simple.
All the code You need to know is at the top of our conversation.
Function first CLEARS the div element(I have access to it)
Function second, very similar to the previous one, DOESN'T change the div element(I don't have access to it).
That's ALL.
Which part of this two sentences You don't understand?

And i told you the code is working. Did a fiddle to it, remember?

Your iframe thing came later. And if you think, that i take all the effort to combine your iframe problem (without any code at all) and your code above (which is working) together in a crystall ball, than you're wrong.

You need help. My scripts are working perfectly. And if you want my help, than provide the informations as i need it and let me decide which code i need to know. Otherwise i wish you the best of luck. Did you understand that?

 

[Infinityhost]

And You wrote "JS Fiddle can't iframes". So why You still talk about its when it's usless in my case? You want to make me sure that the 10 lines are correct when they are not used in the iframe? That is obvious. Sorry I don't think You're the person who can help me with JS. You need to learn much m
ore I guess and I mean more practising. When I asked people im other place they immediatly understood what I'm talking about, after few sentences. Couldn't help unfortunatly but we understood each other. But they know how JS works and how to fast search for the placed where the error may occur. So sorry, I don't think any of Your options are real or may be usefull but thanks anyway. I'll wait here for other programmers. I'm not the person who forces people to do something when I know it is beyond their possibilities.

 

[MeMate]

Okay

 

[Infinityhost]

<html> <body> <textarea id="html_id"><button>Get value</button><button>Write div</button><button>Clear div</button> <br><div>Text</div></textarea> <textarea id="style_id"></textarea> <textarea id="script_id">let u;function set_value(){ let i = prompt("What content?");return i;};function show_div(n){document.querySelectorAll("DIV")[0].innerHTML=n;};function clear_div(){document.querySelectorAll("DIV")[0].innerHTML="";};document.querySelectorAll("BUTTON")[2].setAttribute("onClick","clear_div()");document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=set_value()");document.querySelectorAll("BUTTON")[1].setAttribute("onClick","alert();show_div(u);alert();");</textarea> <button onClick= "document.getElementById('iframe_id').srcdoc='<html><head><style>'+document.getElementById('style_id').value+'</style></head>'+document.getElementById('html_id').value+'<script>'+document.getElementById('script_id').value+'tmp=document;function run_script(val){eval(val);};</script></html>';">Wpisz do iframe</button> <iframe id="iframe_id"></iframe> </body> </html>

This is all.

 

[MeMate]

Al right:

First of all there is no document.querySelectorAll("BUTTON"). Because you're running querySelector on your document.body instead of your iframe.

var myframe = document.getElementById('iframe_id');
var innerFrame = myframe.contentDocument || myframe.contentWindow.document;

and then you can go by

innerFrame.querySelectorAll("BUTTON")

for whatever reason.

But first of all you need to be sure, that your iframe has completely rendered. So you need to use a setTimeout in order to do that.
And of course your whole querySelectorAll thing should be passed through a function "e.g.

function setDynamic(){
setTimeout(function(){
var myframe = document.getElementById('iframe_id');
var innerFrame = myframe.contentDocument || iframe.contentWindow.document;
innerFrame.querySelectorAll("BUTTON") and so on, and so on
},100);
}

and in your messed code above setDynamic must be called after your eval.

But you still wont be able to add any onclick events to your button, because the whole thing is messed up and i don't know why you are doing it that way. Anyway. It's beyond my possibilities. (As you said). Good luck with that.

 

[Infinityhost]

Messed or not I wrote to some guy and he answered -
```
<html>
<head>
<script>
function copy_all() {
const iframe=document.getElementById('iframe_id');
const iframeDoc=iframe.contentWindow.document;
iframeDoc.body.innerHTML=document.getElementById('html_id').value;
const style=iframeDoc.createElement("style");
style.innerHTML=document.getElementById('style_txt_id').value;
iframeDoc.body.appendChild(style);
const script=iframeDoc.createElement("script");
script.innerHTML=document.getElementById('script_txt_id').value;
iframeDoc.body.appendChild(script);}
</script> </head> <body>
<textarea rows="8" cols="80" id="html_id">
<button>Pobranie</button> <button>Write</button> <button>Clear</button> <br/> <div>Source</div> </textarea> <br/>
<textarea rows="8" cols="80" id="style_txt_id"> div { color:red; } </textarea> <br/>
<textarea rows="8" cols="80" id="script_txt_id">
var u; function get_div() { return prompt("What name?"); }
function write_div(n) { document.querySelectorAll("DIV")[0].innerHTML=n; }
function clear_div() { write_div(""); }
document.querySelectorAll("BUTTON")[2].setAttribute("onClick","clear_div()");
document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=get_div()");
document.querySelectorAll("BUTTON")[1].setAttribute("onClick","write_div(u);"); </textarea> <br/>
<input type="button" onclick="copy_all()" value="Write into div" /> <br/>
<iframe id="iframe_id"> </iframe> </body> </html>```

So this is how it should work.

You're welcome xD

As You see there is no need to use iframe.contentWindow.document.querySelectorAll because I operate on functions inside the iframe element.

"for whatever reason." - my project is to teach people how all this document methods work, how variables are declared, how functions work, how arrays look like and maaaaany other things so it is important to my iframe to work as real window. I need all this textareas to create an envirement for inside projects. So when I want to show somebody how to operate on arrays I put simple collection of ie. buttons and give a task to use arrays with them. You should really see it. It's gonna be awesome! xD



And thanks for this "dynamic" and "timeout" things , I will ask that guy about them and check it's possibilites.

If You have any questions don't hesitate to ask!

 

[MeMate]

Of course not, because now the querySelector is within the textarea and is therefore a a part of it.
That's also a way to do it. But i doubt, that you know why. So your project "to teach people" is questionable.

Bye