Quiero redirigir al usuario a diferentes páginas dependiendo de lo que completó en un campo de entrada.
ejemplo :
de lo contrario mostrar un mensaje
Intente usar la instrucción if else y window.location.href para guiar al usuario a la ventana de destino.
function redirect() { const inputVal = Number(document.getElementById("inputVal").value); let url = ""; if (inputVal) { if (inputVal === 1 || inputVal === 2){ url = "https://www.google.com" } else if (inputVal === 3 || inputVal === 4){ url = "https://www.facebook.com" } else { console.log('Redirect Not Defined!!') } } if (url) { window.location.href = url } } document.getElementById("redirectButton").addEventListener("click", redirect); <input type="number" value=1 id="inputVal" /> <button type="button" id="redirectButton"> Redirect </button>Normalmente no recomiendo la declaración de cambio, pero aquí es apta
Tenga en cuenta que aquí en SO la acción puede estar bloqueada
document.getElementById("myForm").addEventListener("submit", function(e) { let loc = ""; switch (+document.getElementById("inputVal").value) { case 1: case 2: loc = "https://www.google.com"; break; case 3: case 4: loc = "https://www.facebook.com" break; case 5: loc = "https://stackoverflow.com"; break; default: console.log('Redirect Not Defined!!') e.preventDefault(); // cancel submit } if (loc) this.action = loc; }) <form id="myForm" target="_blank"> <input type="number" value=1 id="inputVal" /> <button type="submit"> Redirect </button> </form>Aquí hay otra sugerencia viable que usa un objeto como un mapa que hace referencia a las ubicaciones deseadas por índice:
const EL = (sel, EL) => (EL || document).querySelector(sel); const navigate = () => { const addr = [ "google.com", "facebook.com", "stackoverflow.com", ]; const maps = { 1: 0, 2: 0, 3: 1, 4: 1, 5: 2, }; const EL_num = EL("#num"); const url = addr[maps[EL_num.value]]; if (url) return location.assign(`https://${url}`); console.log("Coudn't navigate"); }; EL("#go").addEventListener("click", navigate); <input id="num" type="number" value="1"> <button id="go" type="button">Go</button> mucho más limpio que usando sentencias if o switch .