Issue
I have the below text on a page using HTML:
"Hello my name is HuggyBiscuit"
I'd like to be able to add boxes for example to change "my" and "Huggybiscuit"
I can change 1 of them (for example HuggyBiscuit) using the below code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myFunction(input){
var elementValue = input.value;
document.getElementById("test1").innerHTML = elementValue;
}
</script>
<input id="name" name="name" onkeyup = myFunction(this) type="text" value="HuggBiscuit">
<br>
Hello my name is <code id="test1">HuggBiscuit</code>
</body>
</html>But when I try and add in a second box, it simply replaces the first text box's input. I've tried adding separate IDs to everything but nothing allows me to add 2 boxes to change separate parts of the sentence.
Example of 2 boxes not working:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myFunction(input){
var elementValue = input.value;
document.getElementById("test1","test2").innerHTML = elementValue;
}
</script>
<input id="name" name="name" onkeyup = myFunction(this) type="text" value="HuggBiscuit">
<input id="person" name="name" onkeyup = myFunction(this) type="text" value="my">
<br>
Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code>
</body>
</html>Solution
Get document.getElementById("test1","test2"), return only one element. You can pass id to modify from call function.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myFunction(input, id) {
var elementValue = input.value;
document.getElementById(id).innerHTML = elementValue;
}
</script>
<input id="name" name="name" onkeyup="myFunction(this,'text2')" type="text" value="HuggBiscuit">
<input id="person" name="name" onkeyup="myFunction(this, 'text1')" type="text" value="my">
<br>
Hello <code id="text1">my</code> name is <code id="text2">HuggBiscuit</code>
</body>
</html>Answered By - xdeepakv Answer Checked By - Candace Johnson (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.