basically I have an iframe inside my main.html which shown inside.html file, and what I want is when clicking elements from inside the iframe, it change the outside elements.
I’m very new to javascript, and here’s what I tried. It doesn’t work obviously. The text didn’t change, it still says "click the link". Maybe I’m just missing something? Did I understand how it works wrong?
in the script.js file:
function changeText(){
document.getElementById("text").innerHTML = "clicked";
}
in the inside.html file,
the iframe change into click.html as intended but the text outside didn’t change:
<a href="clicked.html" onclick="changeText()"><p>this</p></a>
<script src="script.js"></script>
in the main.html file:
<p id="text">click the link</p>
<iframe src="main.html" name="mainframe"></iframe>
<script src="script.js"></script>
2
Answers
When calling functions the way you want in JavaScript, you use
functionName
. This basically just executes the function.When you use it this way:
functionName()
, JavaScript tries to get the return value, and overwrite current value, which in this case does nothing.For further explanation,
functionName()
in JavaScript is used this way:Here, the X variable will be overwritten with x+1.
when you switch from one html page to another html page, the page refreshes and the executed javascript function is not visible because the changes will be visible only before the page refresh.So, try using the function in the tag with id "text".
<p id="text" onclick="changeText()">click the link</p>
like this, so clicking on "click the link" the text will change to "clicked".