04-04-2023, 07:47 AM
The HTML part between the <body></body> tags looks like this:
The JavaScript part looks like this:
Code:
What's your favorite fruit?
<br>
<input type="text" id="fruit"></input>
<br>
<input type="button" id="submit" onclick="submit()" value="submit"></button>
<br>
<p id="output"></p>The JavaScript part looks like this:
Code:
function submit()
{
fruitType = document.getElementById("fruit").value;
switch(fruitType)
{
case "Oranges":
document.getElementById("output").innerHTML = "Oranges are $0.59 a pound.";
break;
case "Apples":
document.getElementById("output").innerHTML = "Apples are $0.32 a pound.";
break;
case "Bananas":
document.getElementById("output").innerHTML = "Bananas are $0.48 a pound.";
break;
case "Cherries":
document.getElementById("output").innerHTML = "Cherries are $3.00 a pound.";
break;
case "Mangoes":
document.getElementById("output").innerHTML = "Mangoes are $0.56 a pound.";
break;
case "Papayas":
document.getElementById("output").innerHTML = "Papayas are $2.79 a pound.";
break;
default:
document.getElementById("output").innerHTML = `Sorry, we ran out of ${fruitType}. <br> Would you like to get anything else?`;
}
}