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

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

javascript forms replace

Javascript JS用用户输入替换表单输入,javascript,forms,replace,concatenation,Javascript,Forms,Replace,Concatenation,我是javascript的新手，正在努力完成我的最后一个课程项目。我们基本上是在做一个在线测试。这是一个数学测验，我为答案设置了带有文本输入字段的表单，这些表单位于div容器中。我正在尝试创建一个函数，在单击submit按钮时，该函数将提取用户输入的值，并使用该值将表单替换为div的内部html。这样，答案将被提交，并且在用户提交答案后无法更改。这其中的一个关键步骤是，答案的数字是单独输入的——一个字段表示十列，一个字段表示一列。我试图将它们分开，连接起来，然后与计算出的实际答案进行比较。实际答

我是javascript的新手，正在努力完成我的最后一个课程项目。我们基本上是在做一个在线测试。这是一个数学测验，我为答案设置了带有文本输入字段的表单，这些表单位于div容器中。我正在尝试创建一个函数，在单击submit按钮时，该函数将提取用户输入的值，并使用该值将表单替换为div的内部html。这样，答案将被提交，并且在用户提交答案后无法更改。这其中的一个关键步骤是，答案的数字是单独输入的——一个字段表示十列，一个字段表示一列。我试图将它们分开，连接起来，然后与计算出的实际答案进行比较。实际答案将替换提交按钮，颜色编码反映用户是否正确。以下是我所拥有的：

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）谢谢编辑：我的问题是我的代码根本没有做任何事情。我不知道这与我如何调用“evaluate”函数有关，还是与函数本身有关。我想用输入的值替换所有表单字段，然后用加法问题的正确答案替换按钮。这是我的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>

我怀疑问题可能在于我如何尝试从表单字段中提取和存储值？

由于可能存在许多问题，我将分步骤帮助您，而不是尝试给出整个解决方案。（现在是周末，所以我可以更频繁地回复。）

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

定义分配给变量

generate

的匿名函数。为了进行比较，以下是常规函数的定义方式：

function evaluate() {
    // ...
}

如果调用正确，您的语法可以工作，但您调用它就像调用常规函数一样：

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

所发生的是，对于常规函数，

evaluate（）

函数将被分配给

onclick

事件，而对于匿名函数，

evaluate

和

（）

被解释为在此变量中调用匿名函数。因此，将立即调用

evaluate（）

，而不是

onclick

！显示如何立即替换表单字段

一旦你解决了这个问题，更新你的问题并对我的答案发表评论以吸引我的注意力，我们将从那里开始

顺便说一句，如果您使用的是Chrome，请点击CtrlShiftI并转到Console选项卡，查看您的Javascript是否存在任何问题。Firefox在菜单中也有类似的开发工具功能。

我看不出有问题，尽管我理解您要做的事情的要点。问题是什么？您是要替换按钮还是十位数和一位数的表单字段，还是两者都要替换？编辑您的问题并添加一些HTML可能会有所帮助。我们看不到您的id-s到底指的是什么。好的，我添加了HTML并试图澄清我的问题。函数根本没有响应，我甚至不知道是因为一个小的输入错误还是一个重大的概念问题。

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