JS用用户输入替换表单输入

我是一个javascript新手，并且正在为我的课程最终项目挣扎。我们基本上正在进行在线测验。这是一个数学测验，我已经为答案设置了带有文本输入字段的表单，并且这些表单位于div容器内。我试图创建一个函数，在点击一个提交按钮后，将拉取用户输入的值，并使用该值将表单替换为div的内部html。通过这种方式，答案将被提交，并且在用户提交答案后不能更改。其中一个关键步骤是答案的数字单独输入 - 十列的字段，这是一个字段。我试图分别拉动它们，连接它们，然后将它们与计算出的实际答案进行比较。实际的答案将取代提交按钮，颜色编码以反映用户是否正确。下面是我有：JS用用户输入替换表单输入

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>

我怀疑问题可能在于我如何拉和存储表单字段的值？

来源

2014-04-24 user3567471

我没有看到问题，但我明白你要做的事情的要点。什么是问题？你是否想要替换_button_，或者数字和一位数字的表单域，或两者？这可能有助于编辑您的问题并添加一些HTML，我们无法看到您的ID所指的是什么。 –

好的，我添加了html并试图澄清我的问题。该功能根本没有响应，我甚至不知道它是由于一个小错字还是一个重大的概念问题。 – user3567471

由于潜在的问题很多，我会逐步帮助您，而不是试图给您提供完整的解决方案。（这是现在的周末，所以我可以更频繁地回复。）

第一个问题是您定义和使用函数的方式。你的语法，即

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

定义了分配给可变generate一个匿名功能。为了便于比较，这里是如何定期函数定义：

function evaluate() { 
    // ... 
}

你的语法可以工作，如果所谓的正确，但你称它像一个普通的功能：

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

发生了什么事是，而对于常规功能，功能evaluate()将被分配到onclick事件，对于匿名功能，evaluate和()被解释为调用此变量的匿名函数。因此，evaluate()马上就会打电话，而不是onclick！ Here's a JSFiddle，它显示了你的表单字段是如何被立即替换的。

修复此问题后，请更新您的问题并对我的答案发表评论以吸引我的注意力，我们将从此处着手。

顺便说一句，如果你使用的是Chrome，打按Ctrl移我并转到控制台标签，看看你的Javascript抛出的任何问题。Firefox在菜单中有一个类似的功能 - 看开发者工具。

来源

2014-04-25 23:54:22

JS用用户输入替换表单输入

回答

相关问题