<!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>Si ingreso una URL, no funciona. He visto soluciones en stackoverflow. También he probado el otro método, que es
<script> var url = document.getElementById("xxx"); function navigate() { document.getElementById("gfgFrame").src = url; } </script>Por favor, perdone mi intención. ¿Alguien puede decirme dónde me estoy equivocando?
Usted solicita el elemento en sí, no el valor de este campo, consulte:
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>