I have 2 images. If the person selects one and clicks "NEXT", it redirects to one page. If the person does the same to the other image, it's supposed to redirect to another page.
Here's the code I have:
function getval() {
if (self.value == "1") {
window.location.href = "universal-result.html";
} else if (self.value == "2") {
window.location.href = "disney-result.html"
}
}<body class="choosepark-body">
<p class="text-choosepark">Você quer ingresso para qual complexo?</p>
<input type="image" src="/Archives/Universal Botao.png" onmouseover="this.src='/Archives/Disney Universal Rosa.png'" onmouseout="this.src='Archives/Universal Botao.png'" class="universal-button" value="1">
<input type="image" src="/Archives/Disney Botao.png" onmouseover="this.src='/Archives/Disney Botao Rosa.png'" onmouseout="this.src='/Archives/Disney Botao.png'" class="disney-button" value="2">
<button onclick="getval()" class="next-button"> NEXT</button>
</body>How do i make the image get "selected" when the person clicks on it, and when they click "NEXT", it redirects to the page related to that image?
Also, if possible, when the person hovers onmouseover it changes the icon, but I also wanted to make the icon change when the image is clicked (selected).
You can't do it directly by "image selected". Because, as far as I know, there is no event listener for that in the DOM.
I would try it like this:
HTML:
<input type="image" src="./image/opt-one.png" id="opt-one" />
<input type="image" src="./image/opt-two.png" id="opt-two" />
<button id="next-btn">NEXT</button>
JavaScript:
// get HTML elements by ids
const button = document.getElementById("next-btn");
const imgOne = document.getElementById("opt-one");
const imgTwo = document.getElementById("opt-two");
// setup variable to store choice and object with urls
let choice = "";
const option = {
optOne: "http://option-one.com",
optTwo: "http://option-two.com",
};
// select the images and set choice
imgOne.addEventListener("click", () => (choice = option.optOne));
imgTwo.addEventListener("click", () => (choice = option.optTwo));
// load next page on button click
button.addEventListener("click", () => (window.location.href = choice));
Like that, you could add more images and URLs easily to the app.