JS Replacing form inputs with user input

StackOverflow https://stackoverflow.com/questions/23261551

Question

I'm a novice with javascript, and am struggling with my final project for a class. We're essentially making an online quiz. It's a math quiz, and I've set up forms with text input fields for the answer, and those forms are within div containers. I'm trying to create a function that, upon clicking a submit button, will pull the value of the user's input, and use that value to replace the form as the inner html of the div. This way the answer will be committed and cannot be changed after the user submits their answer. One key step of this is that the digits of the answer are entered individually - a field for the tens column, a field for the ones. I'm trying to pull those separately, concatenate them, and then compare them with the calculated actual answer. The actual answer will replace the submit button, color coded to reflect whether the user was correct or not. Here's what I have:

var firstNumber = Math.floor((Math.random()*50)+1);
var secondNumber = Math.floor((Math.random()*50)+1);
var generate = function(){
    document.getElementById("addends1").innerHTML=firstNumber;
    document.getElementById("addends2").innerHTML=secondNumber;
};
var evaluate = function(){
    var result = firstNumber+secondNumber;
    document.getElementById("button").innerHTML=result;
    var tens = document.getElementById("result10s").value;
    var ones = document.getElementById("result1s").value;
    var entry = tens + ones;
    document.getElementById("resultContainer").innerHTML=entry;
    var cO = document.getElementById("cO").value;
    document.getElementById("carryOverContainer").innerHTML=cO;
    var answer = parseFloat(entry);
    if (answer===result) {
        document.getElementbyID("resultContainer").style.color="#b2f078";
    } else {
        document.getElementbyID("resultContainer").style.color="#e87c73";
    }
};
document.getElementById("button").onclick=evaluate();

(the first function is called in the html tag, onload for the button image) Thanks! Edit: My problem is just that my code isn't doing anything at all. I don't know if that has to do with how I'm calling the "evaluate" function, or the function itself. I want to replace all form fields with their entered values, and then also replace the button with the correct answer to the addition problem. Here's my html:

<body>
<div id="carryOverContainer">
    <form>
        <input type="text" name="carryOver" id="cO"/>
    </form>
</div>
<div id="addends1" class="addends"> </div>
<div id="addends2" class="addends"> </div>
<div id="resultContainer">
    <form>
        <input type="text" id="result10s" class="result">
        <input type="text" id="result1s" class="result">
    </form> 
</div>
<div id="button" onclick=evaluate();>
    <img src="next.png" alt="next" onload="generate();"/>
    </div>
</body>

I'm suspecting the problem may lie in how I'm trying to pull and store the values from the form fields?

Was it helpful?

Solution

As there are potentially many issues, I'll help you in steps rather than try to give you the whole solution. (It's the weekend now, so I can respond more frequently.)

The first issue is in the way you're defining and using functions. Your syntax, i.e.

var evaluate = function() {
    // ...
}

defines an anonymous function assigned to the variable generate. For comparison, here's how regular functions are defined:

function evaluate() {
    // ...
}

Your syntax can work if called properly, but you're calling it like a regular function:

document.getElementById("button").onclick=evaluate();

What's happening is, whereas for a regular function, the function evaluate() would get assigned to the onclick event, for an anonymous function, evaluate and () are interpreted as call the anonymous function in this variable. Therefore, evaluate() is getting called right away, instead of onclick! Here's a JSFiddle that shows how your form fields are immediately replaced.

Once you've fixed this issue, update your question and comment on my answer to grab my attention, and we'll take it from there.

By the way, if you're using Chrome, hit CtrlShiftI and go to the Console tab to see if your Javascript is throwing any issues. Firefox has a similar feature—look for developer tools in the menu.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top