A list item as shown line 22, is by default "panthers 20". Based off some input from the user, I am trying to overwrite "panthers" to whatever the user inputs.
I am familiar java/c#/c++. But web development is very new to me, so I seem to lack the understanding of the syntax.
I've tried figuring this out by reading tutorials, but all the different combinations of syntax I tried, didnt work.
<!DOCTYPE html>
<html>
<head>
<script> //used when user enters in value and submits
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><span id="display"></span></p>
<li class="team"><span id="lbltipAddedComment">panthers</span><span class="score">20</span></li>
<script> //attempting to change the value of panthers to the users input
document.getElementById("lbltipAddedComment").innerHTML = display.value;
</script>
</body>
</html>
If user inputs rams, the list item "team" should say rams 20, instead of panthers 20.
document.getElementById("lbltipAddedComment").innerHTML = display.value;
--> document.getElementById("lbltipAddedComment").innerHTML = display.value;
seems seems to be the issue. using display.valueUsing display.value outputs undefined20undefined20 and using displaydisplay outputs [object HTMLSpanElement]20[object HTMLSpanElement]20
