How to add <p> and text field in the same line and answer message on the right side of txt field

4287 views javascript
-2

<!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>

In this problem i want an output where text field will appear right side of the parahgraph and after the answer id added by the user it must give answer on the right hand side of the text field and only the message colour will become red if the answer is wrong but the colour of question ust remains the same

answered question

1 Answer

2

instead of p use span

 <span>

posted this

Have an answer?

JD

Please login first before posting an answer.