JS Замена ввода формы пользовательским вводом

Я новичок в javascript и борюсь с моим окончательным проектом для класса. По сути, мы делаем онлайн-викторину. Это математическая викторина, и я настроил формы с полями ввода текста для ответа, и эти формы находятся в контейнерах div. Я пытаюсь создать функцию, которая при нажатии кнопки отправки будет извлекать значение пользовательского ввода и использовать это значение для замены формы в качестве внутреннего HTML-кода div. Таким образом, ответ будет зафиксирован и не может быть изменен после того, как пользователь отправит свой ответ. Одним из ключевых шагов этого является то, что цифры ответа вводятся индивидуально - поле для столбца десятков, поле для единиц. Я пытаюсь вытащить их по отдельности, объединить их, а затем сравнить с рассчитанным фактическим ответом. Фактический ответ заменит кнопку отправки, окрашенную в цвет, чтобы отразить, был ли пользователь прав или нет. Вот что у меня есть:

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();

(первая функция вызывается в html-теге, onload для изображения кнопки) Спасибо! Изменить: моя проблема в том, что мой код вообще ничего не делает. Я не знаю, связано ли это с тем, как я вызываю функцию «оценить», или с самой функцией. Я хочу заменить все поля формы на их введенные значения, а затем также заменить кнопку на правильный ответ на задачу добавления. Вот мой 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>

Я подозреваю, что проблема может заключаться в том, как я пытаюсь извлечь и сохранить значения из полей формы?


javascript forms concatenation replace
person user3567471    schedule 24.04.2014    source источник
comment
Я не вижу вопроса, хотя я понимаю суть того, что вы пытаетесь сделать. В чем проблема? Вы пытаетесь заменить кнопку, поля формы с десятками и единицами или и то, и другое? Это может помочь отредактировать ваш вопрос и добавить немного вашего HTML - мы не можем видеть, на что именно ссылаются ваши идентификаторы.   -  person slackwing    schedule 24.04.2014
comment
Хорошо, я добавил html и попытался прояснить свою проблему. Функция вообще не отвечает, и я даже не знаю, связано ли это с крошечной опечаткой или серьезной концептуальной проблемой.   -  person user3567471    schedule 25.04.2014

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку проблем потенциально может быть много, я помогу вам пошагово, а не попытаюсь дать вам полное решение. (Сейчас выходные, поэтому я могу отвечать чаще.)

Первая проблема заключается в том, как вы определяете и используете функции. Ваш синтаксис, т.е.

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

определяет анонимную функцию, назначенную переменной generate. Для сравнения, вот как определяются обычные функции:

function evaluate() {
    // ...
}

Ваш синтаксис может работать при правильном вызове, но вы вызываете его как обычную функцию:

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

Происходит следующее: в то время как для обычной функции функция evaluate() будет назначена событию onclick, для анонимной функции evaluate и () интерпретируются как вызов анонимной функции в этой переменной. Поэтому сразу вызывается evaluate(), а не onclick! Вот JSFiddle, который показывает, как ваши поля формы немедленно заменяются.

Как только вы исправите эту проблему, обновите свой вопрос и прокомментируйте мой ответ, чтобы привлечь мое внимание, и мы продолжим.

Кстати, если вы используете Chrome, нажмите CtrlShiftI и перейдите на вкладку Консоль, чтобы посмотрите, не вызывает ли ваш Javascript какие-либо проблемы. В Firefox есть похожая функция — ищите инструменты разработчика в меню.

person slackwing    schedule 25.04.2014