Menu
I am trying to create 3 buttons, and using javascript, If button 1 is clicked then it changes the "Click a button" text to "You pressed Button 1"
Same for Button 2 and 3! And if Button 3 is pressed, the text colour changes to GREEN
However, I can't seem to get it to work! Any help would be appreciated
Here is my Current Code:
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<script type="text/javascript">
function changeText() {
var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');
var b3 = document.getElementById('b3');
if(b1.onclick="changeText();") {
document.getElementById('pText').innerHTML = "You pressed button 1";
}
if(b2.onlick="changeText();") {
document.getElementById('pText').innerHTML = "You pressed Button 2";
}
}
</script>
<input type="button" value="Button 1" id="b1" onclick="changeText();"/>
<input type="button" value="Button 2" id="b2" onclick="changeText();"/>
<input type="button" value="Button 3" id="b3" onclick="changeText();"/>
<p id="pText">Click on a Button</p>
</body>
</html>
787
To change the button text, first we need to access the button element inside the JavaScript by using the document. getElementById() method and add a click event handler to the button, then set it's value property to blue . Now, when we click on our button , it changes the value from Red to Blue or vice versa.
To change a button's text on click in React:Track the text of the button in a state variable. Set the onClick prop on the button element. When the button gets clicked, update the state variable.
You can try this:
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<script type="text/javascript">
function changeText(value) {
document.getElementById('pText').innerHTML = "You pressed " + value;
}
</script>
<input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/>
<input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/>
<input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/>
<p id="pText">Click on a Button</p>
</body>
</html>
Here what you are doing is whenever you click the button, the onlick(); function is being called containing the value of the button element you just clicked. All the changeText(); function has to do now is edit the innerHTML of the element you want to edit. Directly.
Hope this helps.
UPDATED Code: (To reflect your updated parameters)
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<script type="text/javascript">
function changeText(value) {
document.getElementById('pText').innerHTML = "You pressed " + value;
if(value == "Button 3")
{
document.getElementById('pText').setAttribute('style', 'color: green');}
}
</script>
<input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/>
<input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/>
<input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/>
<p id="pText">Click on a Button</p>
</body>
</html>
Try this:
<html>
<head>
<title>Button</title>
</head>
<body>
<script type="text/javascript">
function changeText(text) {
document.getElementById('pText').innerHTML=text;
}
</script>
<input type="button" value="Button 1" id="b1" onclick="changeText('You pressed Button 1');"/>
<input type="button" value="Button 2" id="b2" onclick="changeText('You pressed Button 2');"/>
<input type="button" value="Button 3" id="b3" onclick="changeText('You pressed Button 3');"/>
<p id="pText">Click on a Button</p>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
