Button Clicked change Colour

  • A+
Category:Languages

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>

 


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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: