Soy nuevo en JavaScript y actualmente trato de obtener variables dentro de una función para que funcionen fuera de ella y actualmente me encontré con un muro en el que parece que no puedo hacer que funcione.
El escenario es que quiero cambiar la URL a través de un formulario desplegable usando una combinación de Javascript y HTML. Si pongo la instrucción if else dentro de la función, funcionará sin problemas, pero en mi escenario, necesito ponerla fuera de la función y no funciona incluso después de hacer que la variable sea global.
Probé varias soluciones de preguntas relacionadas con mi problema, pero no parece funcionar para mi escenario.
Aquí está el código que estoy usando actualmente.
var documentLink = document.getElementById('documentLink'); function getDocument(option) { chosenDocument = option.value; } if (chosenDocument === "Google") { documentLink.href = "https://www.google.com"; } else if (chosenDocument === "duckduckgo") { documentLink.href = "https://www.duckduckgo.com"; }Cuando coloque sus códigos directamente en el cuerpo de la etiqueta "script", se ejecutará solo una vez (cuando se cargue el script). Debe poner sus códigos en un lugar que pueda ejecutarse más de una vez, por ejemplo, ponerlo en una función y llamarla cuando se active un evento.
Si necesita que el bloque "if" se ejecute cada vez que cambie el valor desplegable, tiene estas opciones: 1- mueva su código a la función getDocument 2- mueva su bloque "if" a una nueva función y luego llámelo en la función getDocument
o 3- mueva su bloque "si" a una nueva función y luego asígnelo a otro evento que coincida con el evento desplegable (como menú desplegable en cambio o menú desplegable en desenfoque)
Esto es probablemente lo que querías hacer.
Tenga en cuenta que uso eventListeners recomendados
window.addEventListener("DOMContentLoaded", function() { // when elements are available in page const documentLink = document.getElementById('documentLink'); document.getElementById("searchSites").addEventListener("change", function() { const chosenSite = this.value; if (chosenSite === "Google") { // this could be done nicer with a lookup table documentLink.href = "https://www.google.com"; } else if (chosenSite === "duckduckgo") { documentLink.href = "https://www.duckduckgo.com"; } }) documentLink.addEventListener("click", function(e) { if (this.getAttribute("href") === "") { // not set e.preventDefault(); // stop link alert("Please select a site first"); } }) }) <select id="searchSites"> <option value="">Please select</option> <option value="Google">Google</option> <option value="duckduckgo">duckduckgo</option> </select><br/> <a href="" id="documentLink">GO</a>Puede probar el siguiente código:
<script> // Function extracts and returns value from provided parameter function getDocumentValue(option) { return option.value; } window.addEventListener('DOMContentLoaded', () => { const documentLink = document.getElementById('documentLink'); // Id is fine if we are sure it wont be duplicated. const chosenDocument = getDocumentValue(SelectOption); if (chosenDocument === "Google" ) { documentLink.href = "https://www.google.com"; } else if (chosenDocument === "duckduckgo") { documentLink.href = "https://www.duckduckgo.com"; } }) </script>