First of all, I am really new to Javascript and has just started the last weeks.
What i want:
A searchbar where a user can type their postcode and then the script searches through array to see if postnumber is in either of the objects - then responding the message found in the object it is located in.
I get it to respond the the message - but only for the first postnumber. I guess the problem is within the loop.
var montering = { "postnummer": [{ "id": "0", "codes": ["3089", "2089"], "msg": "Message 1" }, { "id": "1", "codes": ["3088", "2088"], "msg": "Message 2" }] } var placeholder = ""; document.getElementById('melding').innerHTML = placeholder; //Script to search array for a match document.getElementById("searchBtn").addEventListener('click', function() { var formInput = document.getElementById("formInput").value, foundItem = null; //we'll store the matching value here if (formInput === '') { alert('Tast inn et postnummer'); return false; } for (i = 0; i < montering.postnummer.length; i++) { if (montering.postnummer[i].codes[i] == formInput) { foundItem = montering.postnummer[i].codes[i]; break; //we've found a match, no sense to continue } } if (foundItem) { var msg = document.getElementById('melding'); melding.innerHTML += 'Melding: ' + montering.postnummer[i].msg; } else { alert("Code Number: '" + formInput + "' Was Not Found"); } });
<form method="get" action="input"> <fieldset> <input id="formInput" name="formInput" type="text" placeholder="Tast inn postnummeret ditt" required/> </fieldset> </form> <input id="searchBtn" type="submit" value="Finn pris"> <p id="melding">Placeholder</p>
use Array.prototype.includes
on codes
:
var montering = { "postnummer": [{ "id": "0", "codes": ["3089", "2089"], "msg": "Message 1" }, { "id": "1", "codes": ["3088", "2088"], "msg": "Message 2" }] } var placeholder = ""; document.getElementById('melding').innerHTML = placeholder; //Script to search array for a match document.getElementById("searchBtn").addEventListener('click', function() { var formInput = document.getElementById("formInput").value, foundItem = null; //we'll store the matching value here if (formInput === '') { alert('Tast inn et postnummer'); return false; } for (i = 0; i < montering.postnummer.length; i++) { if (montering.postnummer[i].codes.includes(formInput)) { // change this line foundItem = montering.postnummer[i].codes[i]; break; //we've found a match, no sense to continue } } if (foundItem) { var msg = document.getElementById('melding'); melding.innerHTML += 'Melding: ' + montering.postnummer[i].msg; } else { alert("Code Number: '" + formInput + "' Was Not Found"); } });
<form method="get" action="input"> <fieldset> <input id="formInput" name="formInput" type="text" placeholder="Tast inn postnummeret ditt" required/> </fieldset> </form> <input id="searchBtn" type="submit" value="Finn pris"> <p id="melding">Placeholder</p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.