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