Menu
So little bit stuck here, I have several buttons that I want to do separate actions. For example of someone clicks the colour green it changes the paragraph text colour to green, I accomplished the first one but I can't seem to work others, what's the correct way to do it?
//JS:
function myFunction() {
var p = document.getElementById("paragraph"); // get the paragraph
document.getElementById("paragraph").style.color = "green";
var p = document.getElementById("paragraph"); // get the paragraph
document.getElementById("Bluecolour").style.color = "blue";
} <!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 200px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction()" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction()" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="myFunction()" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="myFunction()" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="myFunction()" id="Serif">Serif</button> <!-- Changes text to Serif -->
<button type="button" onclick="myFunction()" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="myFunction()" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
</p>
</div>
</body>
</html>
222
asked Aug 27 '26 08:08
There are different ways to do that,
call the same function but this time inside the function pass a parameter of button ID
button type="button" onclick="myFunction(this.id)" id="GreenColour">Green
and the function is:
function myFunction(id) {
if(id=="GreenColour")
document.getElementById("paragraph").style.color="green"; // get the paragraph
//document.getElementById("paragraph").style.color = "green";
else if(id=="BlueColour")
document.getElementById("paragraph").style.color=blue; // get the paragraph
//document.getElementById("Bluecolour").style.color = "blue";
}
Your myFunction() doesn't know what it need to do when it has been called.
Try this entry level code, simply declare few function to change the text color:
function blue() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'blue'
}
function green() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'green'
}
function mono(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = "monospace"
}<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 100px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="green()">Green</button><!-- Changes text to Green -->
<button type="button" onclick="blue()">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="mono()">Mono</button><!-- Changes text to monospace-->
</p>
</div>
</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
