javascript - 如何制作一个脚本来显示以前的文本字段的值并添加新的文本字段,直到答案正确?

标签 javascript jquery html textfield

“我需要一个脚本来创建新的文本字段,并显示以前的带有值和消息的文本字段。”

  • 如果按“BUTTON”,请检查文本字段值。
  • 如果值为 100,则脚本函数结束。
  • 否则,请使用输入的 VALUE 和 MESSAGE 创建新的文本字段,直到获得正确的答案。

我尝试使用“document.createTextNode();”但该方法无法调用ID值

<小时/>

点击链接下方查看图片

I need script for this kind of output

<!DOCTYPE html>
<html>
<body>

<input id="num1" type="text" size="2" maxlength="1" required>
<input id="num2" type="text" size="2" maxlength="1" required>
<input id="num3" type="text" size="2" maxlength="1" required>

<p id="ans" ></p>
<p id="a" ></p>
<p id="b" ></p>
<p id="c" ></p>


<script>
function myFunction() {
var x, y, z, text;

var a = document.getElementById("num1").value;
var b = document.getElementById("num2").value;
var c = document.getElementById("num3").value;   

x = document.getElementById("num1").value;
y = document.getElementById("num2").value;
z = document.getElementById("num3").value;

if (x,y,z == 1 && y == 0 && z == 0) {
    text = "Right Ans.";
} else {
    text = "Wrong Ans.";
}

document.getElementById("ans").innerHTML = text;
document.getElementById("a").innerHTML = a;
document.getElementById("b").innerHTML = b;
document.getElementById("c").innerHTML = c;


}
</script>

<button type="button"  onclick=myFunction()> Check </button>

</body>
</html> 

最佳答案

您可以尝试这个工作示例。

var IsCorrectAns=false;
function myFunction() {
  if(IsCorrectAns==false)
  {
    var x, y, z, text;

    x = document.getElementById("num1").value;
    y = document.getElementById("num2").value;
    z = document.getElementById("num3").value;

    if (x == 1 && y == 0 && z == 0) {
        text = "Right Ans.";
        $("#divAnsInput").hide();
        IsCorrectAns=true;
    } else {
        text = "Wrong Ans.";
        $("#num1").val("");
        $("#num2").val("");
        $("#num3").val("");
    }

    var ansHTML="<div class='AnsSnippet'>"+              
                "<p><span>"+x+"</span>&nbsp;<span>"+y+"</span>&nbsp;<span>"+z+"</span></p>"+
                " <p>"+text+"</p>"+
                "</div>";

    $("#divIns").append(ansHTML);
  }
  else
  {
        IsCorrectAns=false;
        $("#num1").val("");
        $("#num2").val("");
        $("#num3").val("");
        $("#divIns").html("");
        $("#divAnsInput").show();
  }
}
.AnsSnippet span {
    height: 20px;
    padding: 3px 18px;
    border: 1px solid #DDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divIns">
  
</div>
<div id="divAnsInput">
  <input id="num1" type="text" size="2" maxlength="1" required>
  <input id="num2" type="text" size="2" maxlength="1" required>
  <input id="num3" type="text" size="2" maxlength="1" required>
</div>


<button type="button"  onclick=myFunction()> Check </button>

关于javascript - 如何制作一个脚本来显示以前的文本字段的值并添加新的文本字段,直到答案正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45115091/

相关文章:

javascript - 围绕长轴旋转 SVG 省略号路径

javascript - 用于 API 的 NODEJS Express 应用程序生成器

php - Cordova - jquery ajax 发布到服务器上的 php

iphone - 有什么可以在原生移动应用程序中实现而在 HTML5 网络应用程序中无法实现的?

html - 使用字体 Font Awesome

javascript - Angular.js 单元测试 "inject()"在 "run"阶段 block 之前触发

javascript - ajax 调用后 Viewmodel 内容为空?

jquery - 是否可以在 jquery 函数中为 JQuery UI 工具提示设置不同的 UI 主题

javascript - 在任何 DOM 元素旁边插入 Logo

javascript - <JSP> 获取复选框的值