Question

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Generate question</button>

<p id="demo1">? x 1 =</p> <input type="text" id="myText1" value="" maxlength="4" size="4">
<p id="demo2">? x 2 =</p> <input type="text" id="myText2" value="" maxlength="4" size="4">
<p id="demo3">? x 3 =</p> <input type="text" id="myText3" value="" maxlength="4" size="4">
<p id="demo4">? x 4 =</p> <input type="text" id="myText4" value="" maxlength="4" size="4">
<p id="demo5">? x 5 =</p> <input type="text" id="myText5" value="" maxlength="4" size="4">
<p id="demo6">? x 6 =</p> <input type="text" id="myText6" value="" maxlength="4" size="4">
<p id="demo7">? x 7 =</p> <input type="text" id="myText7" value="" maxlength="4" size="4">
<p id="demo8">? x 8 =</p> <input type="text" id="myText8" value="" maxlength="4" size="4">
<p id="demo9">? x 9 =</p> <input type="text" id="myText9" value="" maxlength="4" size="4">
<p id="demo10">? x 10 =</p> <input type="text" id="myText10" value="" maxlength="4" size="4">

<br>
<br>
<br>
<button onclick="myFunction1()">Check answer</button>
<p id="demo10"></p>

<script>

function myFunction1() {
    var x = document.getElementById("myText10").value;
    document.getElementById("demo10").innerHTML = x;

}
</script>

<script>
function myFunction() {
    var txt;
    var person = prompt("Enter a number for multiplication:", "");
    if (person == null || person == "") {
        txt = "? x 1 =";
    } else {
        txt = person + " x 1 =";
    }
    document.getElementById("demo1").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 2 =";
    } else {
        txt = person + " x 2 =";
    }
    document.getElementById("demo2").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 3 =";
    } else {
        txt = person + " x 3 =";
    }
    document.getElementById("demo3").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 4 =";
    } else {
        txt = person + " x 4 =";
    }
    document.getElementById("demo4").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 5 =";
    } else {
        txt = person + " x 5 =";
    }
    document.getElementById("demo5").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 6 =";
    } else {
        txt = person + " x 6 =";
    }
    document.getElementById("demo6").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 7 =";
    } else {
        txt = person + " x 7 =";
    }
    document.getElementById("demo7").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 8 =";
    } else {
        txt = person + " x 8 =";
    }
    document.getElementById("demo8").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 9 =";
    } else {
        txt = person + " x 9 =";
    }
    document.getElementById("demo9").innerHTML = txt; 

    if (person == null || person == "") {
        txt = "? x 10 =";
    } else {
        txt = person + " x 10 =";
    }
    document.getElementById("demo10").innerHTML = txt; 
}
</script>

</body>
</html>

在此问题中，我需要一个输出，其中文本字段将出现在段落的右侧，并且在用户添加答案ID后，它必须在文本字段的右侧给出答案，并且仅消息颜色将变为红色如果答案是错误的，但问题的颜色保持不变

Answer 1

您可以在div上换行，并向div内联一些样式

style="display: flex;flex-direction: row;"

如何在同一行中添加<p>和文本字段并在txt字段的右侧回答消息

1 个答案: