I'm trying to display the user input through the submit button. The user will input tool types and then the first five inputs will be displayed in the li's. Then as the limit of 5 tools is reached, another function prints 'Thanks for your suggestions'. However, I can't get the function to print out any of the user input for suggested tools. Could someone help me understand why they aren't printing out?
<script src="modernizr.custom.05819.js">
var i = 1;
var listItem = "";
function processInput() {
if (i <= 5) {
listItem[0] += 1;
listItem = toolBox;
var toolBox = "";
alert("This is running");
if (i == 5) {
var resultsExpl = "Thanks for your suggestions";
}
}
var backSubmit = document.getElementById("button");
if (backSubmit.addEventListener) {
backSubmit.addEventListener("click", calcTotal, false);
} else if (backsubmit.attachEvent) {
backSubmit.attachEvent("onclick", calcTotal);
}
}
</script>
<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="submit" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
I'm trying to display the user input through the submit button. The user will input tool types and then the first five inputs will be displayed in the li's. Then as the limit of 5 tools is reached, another function prints 'Thanks for your suggestions'. However, I can't get the function to print out any of the user input for suggested tools. Could someone help me understand why they aren't printing out?
<script src="modernizr.custom.05819.js">
var i = 1;
var listItem = "";
function processInput() {
if (i <= 5) {
listItem[0] += 1;
listItem = toolBox;
var toolBox = "";
alert("This is running");
if (i == 5) {
var resultsExpl = "Thanks for your suggestions";
}
}
var backSubmit = document.getElementById("button");
if (backSubmit.addEventListener) {
backSubmit.addEventListener("click", calcTotal, false);
} else if (backsubmit.attachEvent) {
backSubmit.attachEvent("onclick", calcTotal);
}
}
</script>
<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="submit" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
- I presume you're not using jQuery? – ddsnowboard Commented Oct 1, 2015 at 0:24
-
Note that you have:
<script src="modernizr.custom.05819.js">which will cause the content of the script element to be ignored. – RobG Commented Oct 1, 2015 at 2:52 - @RobG, I'm running the code through that external file. Just put in all in together for the sake of space! I should have taken that off for example's sake. – Seth Spivey Commented Oct 2, 2015 at 1:05
4 Answers
Reset to default 4Here's the working DEMO to your problem.
I have removed the button type as submit because in some browsers instead of calling the function processInput it will submit the form.
Here is my JavaScript that I changed,
var count=1;
function processInput(){
var tool = document.getElementById("toolBox").value;
document.getElementById("toolBox").value = "";
if(count==5){
document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
document.getElementById("item"+count).innerHTML = tool;
}else{
document.getElementById("item"+count).innerHTML = tool;
count++;
}
}
function resetForm(){
document.getElementById("results").innerHTML = '<ul><li id="item1"></li><li id="item2"></li><li id="item3"></li><li id="item4"></li><li id="item5"></li><p id="resultsExpl"></p></ul>';
}
The only change I made to your HTML code was to add formId as the id for your form.
<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 id="formId">
<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" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
For me not much of this was working so I modified your code a bit to this working example. Each input fills in the <li> fields in order. On the 5th entry, you get alerted, and on the reset button the <li>'s are blanked out. Was not sure if this is what you were going for specifically but it sounded like it
var i = 1;
function processInput() {
if (i <= 5) {
document.getElementById('item' + i).innerHTML = document.getElementById('toolBox').value;
document.getElementById('toolBox').value = '';
if (i == 5) {
alert('Thank you for your suggestions');
} else {
i++;
}
}
}
function resetForm() {
while (i >= 1) {
document.getElementById('item' + i).innerHTML = '';
i--;
}
i = 1;
}<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" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>I'll try to list some of the problems you have into your code:
- Defining a
scripttag with thesrcattribute, and writing code inline, this will never work - Defining some global variables, and although this isn't a bug, it's a really bad design
- Declaring a variable
listItemas an empty string, and then using its 1st character to increment aNumber, I don't realize exactly what you're trying to do here. - Then, you set an undefined/undeclared
toolBoxvariable to thelistItemstring - And, afterall, you add a
clickevent handler to thesubmitbutton, but to an undefined callback
Well, since your code doesn't make much sense for me, but I think I got what you're trying to achieve, I've made an example of your code updated, and you can check the full mented code below:
/* we encapsulate your hole code into an IIFE (Immediately-Invoked Function Expression)
the goal here is to not polute the global scope, so the variable declarations reside inside it */
(function(d) {
/* that's the counter you already had, I renamed it from i to item */
var item = 1;
/* we cache all the elements we're going to use here, by getting them by id */
var txt = d.getElementById('toolBox'),
btn = d.getElementById('button'),
reset = d.getElementById('reset'),
results = d.getElementById('results'),
resultsExpl = d.getElementById('resultsExpl');
/* we add the 'click' event handlers to our buttons
it's better than puting directly inside the HTML, because it's a better design
this approach is known as Unobstrusive Javascript */
btn.addEventListener('click', processInput);
reset.addEventListener('click', resetForm);
/* your processInput function, with the same logic you had, but fixed */
function processInput() {
if (item <= 5) {
/* here, we get the li tag by its id, concatenating the string 'item' to our variable item */
var li = d.getElementById('item' + item);
/* we must use the property textContent to change the text of the li
and we get the user's input by getting its property value */
li.textContent = txt.value;
/* then, we increment our counter. the code below is the same as item += 1 */
item++;
}
/* if the last item was inserted, we show our message */
if (item > 5) {
resultsExpl.textContent = 'Thanks for your suggestions';
}
}
function resetForm() {
/* to reset our form, firstly I loop through all the lis inside the div results */
[].forEach.call(results.querySelectorAll('li'), function(el, i) {
/* and I change each li textContent property to an empty string */
el.textContent = '';
});
/* then, we set our input's value to empty, and we also reset our item variable to 1 */
txt.value = '';
item = 1;
}
})(document); /* I'm passing the document as a parameter, so I can use inside the IIFE as the variable d */<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="submit" id="button">Submit</button>
<button type="button" id="reset">Reset</button>
</fieldset>
</form>A little tidied up version of Saumil Soni's post:
var count=1;
var done;
function processInput(){
var tool = document.getElementById("toolBox").value;
if (done!=1) {
document.getElementById("toolBox").value = "";
}
if(count==5){
if (done!=1) {
document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
document.getElementById("item"+count).innerHTML = tool;
done = 1;
}
}else{
if (done!=1) {
document.getElementById("item"+count).innerHTML = tool;
count++;
}
}
}
function resetForm() {
location.reload();
}<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 id="formId" onSubmit="processInput(); return false;">
<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" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>