Add additional values ​​to displayed format data fields using javascript

Question

I'm trying to achieve this:

I want to create a form that collects data entered by the user and prints it on the screen. So far I have achieved almost a working effect with the code snippet below, however, I need the "textone" and "textTWO" fields to display the additional data values ​​of "task one" and "task two" (before their values )

function testVariable() {
    var strText = document.getElementById("textone").value;          
    var strText1 = document.getElementById("textTWO").value;
    var result = strText + ' ' + strText1;
    document.getElementById('spanResult').textContent = result;

}

<input type="text" id="textone" />
<input type="text" id="textTWO" />
<button  onclick="testVariable()">Submit</button> <br />
<span id="spanResult"></span>

So, my question is: How do I change the JS so that "Task One" is printed on the screen before the result of the "Task One" field, and the result of "Task Two" is the same

Answer 1

You should only add tags where the value is returned, for example:

var result = 'Task one: ' + strText + ' AND TastTwo: ' + strText1;

function testVariable() {
  var strText = document.getElementById("textone").value;
  var strText1 = document.getElementById("textTWO").value;
  var result = 'Task one: ' + strText + ' AND TastTwo: ' + strText1;
  document.getElementById('spanResult').textContent = result;
}

Submit