<!DOCTYPE html>
<html>
<body style="text-align:center;">
<iframe id="gfgFrame" src=""
style="height: 50vh; width: 600px;">
</iframe>
<input type="text" id = "xxx">
<p id = "u"></p>
<button onclick="navigate()">
Click it
</button>
<script>
var url = document.getElementById("xxx");
function navigate() {
document.getElementById("gfgFrame").setAttribute("src", url);
document.getElementById("u").innerHTML = "Hello";
}
</script>
</body>
</html>
If I enter a URL, it's not working. I have seen solutions on stackoverflow. I have also tried the other method, which is
<script>
var url = document.getElementById("xxx");
function navigate() {
document.getElementById("gfgFrame").src
= url;
}
</script>
Please forgive my intendation. Can anyone tell me where I'm going wrong?
You requesting element itself, not the value of this field, see:
const urlBlock = document.getElementById("xxx"); // get url text input
function navigate() {
const iframe = document.getElementById("gfgFrame");
const text = document.getElementById("u");
// get url from input
const url = urlBlock.value;
iframe.setAttribute("src", url);
text.innerHTML = "Hello";
}<iframe id="gfgFrame" src="https://fr.wikipedia.org/wiki/Main_Page" style="height: 50vh; width: 600px;"></iframe>
<input type="text" id="xxx" value="https://wikipedia.org/wiki/Main_Page" />
<p id="u"></p>
<button onclick="navigate()">Click it</button>