I need to convert the if statement in the function to a switch statement for an assignment. What the function needs to do is have the user input be a displayed list item when they press the submit button. When the number of inputs equals 5, it says "Thanks for your suggestions."
I included the original if statement as a comment.
I'm not sure where to go from here so that it works the same as the if statement.
<article>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox" />
</fieldset>
<fieldset>
<button type="button" id="button">Submit</button>
</fieldset>
</form>
</article>
<script>
// global variables
var i=1;
var listItem = "";
// function to add input to list
function processInput()
{
/*
if (i<=5)
{
listItem = "item" + i;
document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
document.getElementById("toolBox").value = "";
if (i==5)
{
document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";
}
i++;
}
*/
switch (i) {
case 5:
document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";
break;
case default:
listItem = "item" + i;
document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
document.getElementById("toolBox").value = "";
i++;
}
}
// adds backward compatible event listener to Submit button
var submitButton = document.getElementById("button");
if (submitButton.addEventListener) {
submitButton.addEventListener("click", processInput, false);
} else if (submitButton.attachEvent) {
submitButton.attachEvent("onclick", processInput);
}
</script>
Aucun commentaire:
Enregistrer un commentaire