stackoom
  简体   繁体   中英

Button Clicked change Colour

 原文  2018-10-29 04:19:19  6   10    javascript/ html/ buttonclick

Question

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>

10 answers

solution1
 1  2018-10-29 04:34:24

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>

solution2
 1  2018-10-29 04:34:36

Here is the full version of all buttons working, you can use switch case so you can use the same code for multiple buttons. I have used switch case 

 function myFunction(actionType,actionValue,currentButton) { var increaseDecreaseFactor = 5; switch (actionType) { case 'color': document.getElementById("paragraph").style.color = actionValue; currentButton.style.color = actionValue; break; case 'increaseFont': txt = document.getElementById("paragraph"); style = window.getComputedStyle(txt, null).getPropertyValue('font-size'); currentSize = parseFloat(style); txt.style.fontSize = (currentSize + increaseDecreaseFactor) + 'px'; break; case 'decreaseFont': txt = document.getElementById("paragraph"); style = window.getComputedStyle(txt, null).getPropertyValue('font-size'); currentSize = parseFloat(style); txt.style.fontSize = (currentSize - increaseDecreaseFactor) + 'px'; break; case 'changeFont': document.getElementById("paragraph").style.fontFamily = actionValue; break; default: break; } } 
 #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; } 
 <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('color','green',this)" id="GreenColour">Green</button><!-- Changes text to Green --> <button type="button" onclick="myFunction('color','blue',this)" id="Bluecolour">Blue</button><!-- Changes text to Blue --> <button type="button" onclick="myFunction('increaseFont','size++',this)" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked --> <button type="button"onclick="myFunction('decreaseFont','size--',this)" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked --> <button type="button" onclick="myFunction('changeFont','monospace',this)" id="Mono">Mono</button> <!-- Changes text to Mono --> <button type="button" onclick="myFunction('changeFont','Sans-Serif',this)" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif --> <button type="button" onclick="myFunction('changeFont','Serif',this)" id="Serif">Serif</button> <!-- Changes text to Serif --> </p> </div>

solution3
 1  2018-10-29 04:37:23

There are different ways to do that,

  1. name distinct function name for distinct button id and set the background according to that

  2. 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";
  }

solution4
 1  2018-10-29 04:42:26

You could separate the logic into different functions and pass values as arguments to them: 

 const paragraph = document.getElementById("paragraph"); let fontSize = 1; function setStyle(style, value) { paragraph.style[style] = value; } function incrementSize(value) { fontSize += value paragraph.style.fontSize = `${fontSize}em` ; } 
 <!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="setStyle('color', 'green')" id="GreenColour">Green</button><!-- Changes text to Green --> <button type="button" onclick="setStyle('color', 'blue')" id="Bluecolour">Blue</button><!-- Changes text to Blue --> <button type="button" onclick="setStyle('font-family', 'monospace')" id="Mono">Mono</button> <!-- Changes text to Mono --> <button type="button" onclick="setStyle('font-family', 'sans-serif')" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif --> <button type="button" onclick="setStyle('font-family', 'serif')" id="Serif">Serif</button> <!-- Changes text to Serif --> <button type="button" onclick="incrementSize(+0.1)" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked --> <button type="button"onclick="incrementSize(-0.1)" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked --> </p> </div> </body> </html>

solution5
 1  2018-10-29 04:42:55

Updated code using SWITCH case 

 //JS: function myFunction(btnColor) { var p = document.getElementById("paragraph"); // get the paragraph switch(btnColor){ case 'green': document.getElementById("paragraph").style.color = "green"; break; case 'blue': document.getElementById("paragraph").style.color = "blue"; break; case 'mono': document.getElementById("paragraph").style.color = "mono"; break; case 'sansserif': document.getElementById("paragraph").style.fontFamily = "Sans Serif"; break; case 'serif': document.getElementById("paragraph").style.fontFamily = "serif"; break; case 'sizeadd': var el = document.getElementById('paragraph'); var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); var fontSize = parseFloat(style); el.style.fontSize = (fontSize + 1) + 'px'; document.getElementById("paragraph").style.fontSize = "serif"; break; case 'sizeminus': var el = document.getElementById('paragraph'); var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); var fontSize = parseFloat(style); el.style.fontSize = (fontSize - 1) + 'px'; break; } } 
  #paragraph { padding: 10px; margin-bottom: 10px; background-color: silver; border: 1px dashed black; width: 90%; /* you can adjust this on Firefox if needed */ height: 20px; overflow: hidden; margin-top: 10px; } 
  <!doctype html> <html lang="en"> <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('green')" id="GreenColour">Green</button><!-- Changes text to Green --> <button type="button" onclick="myFunction('blue')" id="Bluecolour">Blue</button><!-- Changes text to Blue --> <button type="button" onclick="myFunction('mono')" id="Mono">Mono</button> <!-- Changes text to Mono --> <button type="button" onclick="myFunction('sansserif')" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif --> <button type="button" onclick="myFunction('serif')" id="Serif">Serif</button> <!-- Changes text to Serif --> <button type="button" onclick="myFunction('sizeadd')" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked --> <button type="button"onclick="myFunction('sizeminus')" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked --> </p> </div> </body> </html>

solution6
 1  2018-10-29 05:07:05

First of all, for caching reasons, it's best to use external CSS and JavaScript. Just make sure you change your CSS and JavaScript file names every time you update the code when you go live. Also, it's a best practice to separate your HTML, CSS, and JavaScript.

Here is some code showing you how to change colors. It should be easy to see that you can just change the paraColor argument, following the design pattern below, to get the results you seek. 

 //<![CDATA[ /* js/external.js */ var doc, bod, htm, M, I, S, Q, paraColor; // for use on other loads addEventListener('load', function(){ doc = document; bod = doc.body; htm = doc.documentElement; M = function(tag){ return doc.createElement(tag); } I = function(id){ return doc.getElementById(id); } S = function(selector, within){ var w = within || doc; return w.querySelector(selector); } Q = function(selector, within){ var w = within || doc; return w.querySelectorAll(selector); } var para = I('paragraph'), pS = para.style; paraColor = function(color){ pS.color = color; } I('greenColor').addEventListener('click', function(){ paraColor('green'); }); I('blueColor').addEventListener('click', function(){ paraColor('blue'); }); }); // load end //]]> 
 /* css/external.css */ html,body{ padding:0; margin:0; } .main{ width:980px; margin:0 auto; } #paragraph{ height:100px; background-color:silver; padding:10px; border:1px dashed black; margin:10px 0; overflow:hidden; } 
 <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8' /> <meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' /> <title>Paratext</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> <div class='main'> <h1>Ali Rizwan</h1> <p id='paragraph'>Box changes text based on what color is clicked</p> <p id='buttons'> <input type='button' id='greenColor' value='Green' /> <input type='button' id='blueColor' value='Blue' /> </p> </div> </body> </html>

solution7
 1  2018-10-29 05:11:49

the easiest way is to create function with parameter like myFunction(name, value) 

 var fontSize = 12; function myFunction(name, value) { var p = document.getElementById("paragraph"); if (value == 'SizeAdd') { fontSize += 2; value = fontSize + 'px'; } if (value == 'SizeMinus') { fontSize -= 2; value = fontSize + 'px'; } p.style[name] = value; } 
 <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('color', 'green')">Green</button> <button type="button" onclick="myFunction('color', 'blue')">Blue</button> <button type="button" onclick="myFunction('fontFamily', 'Mono')">Mono</button> <button type="button" onclick="myFunction('fontFamily', 'Sans-Serif')">Sans Serif</button> <button type="button" onclick="myFunction('fontFamily', 'Serif')">Serif</button> <button type="button" onclick="myFunction('fontSize', 'SizeAdd')">Size++</button> <button type="button" onclick="myFunction('fontSize', 'SizeMinus')">Size--</button> </p>

solution8
 0  2018-10-29 04:31:05

First add below link in your head section. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can do above things by this way : 

$("button").click(function() {
    var Id = $(this).attr('id');
    if(Id == 'GreenColour'){
        $("#"+Id).css('color','green');
    }elseif(Id == 'Bluecolour'){
        $("#"+Id).css('color','blue');
    }elseif(...){
        .....
    }else(...){
        .....
    }
});

and so on. You can perform your different operation based on its ids in if else.

solution9
 0  2018-10-29 04:39:26

You can do it like this 

<button type="button" onclick="myFunction()" id="GreenColour" c_name="green">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction()" id="Bluecolour" c_name="blue">Blue</button><!-- Changes text to Blue -->

function myFunction(evn) {
    var color = event.currentTarget.getAttribute('c_name');
    document.getElementById("paragraph").style.color = color;
   event.currentTarget.style.color = color;
}

set the color name in div as attribute and read that attribute in calling function and use it.

solution10
 0  2018-10-29 05:12:19

So with your help and others that see this I learned this, essentially the button onclick name can be used in JS to change the text colour, define the button id, create a variable and then default JS to change the colour of paragraph.

HTML: 

   <!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-->
<button type="button" onclick="sansserif()">Sans Serif</button><!-- Changes text to Sans Serif-->
<button type="button" onclick="serif()">Serif</button><!-- Changes text to Serif-->
</p>
</div>
</body>
</html>

JS: 

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'
}

function sansserif(){
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.fontFamily = 'sans-serif'
}

function serif(){
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.fontFamily = 'serif'
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question change colour of a mat button when clicked in angular How to change text colour when button is clicked How to change the button colour when it is clicked How to toggle button colour when it is clicked and change the colour back to its previous colour when it is clicked again change background-colour of clicked button in react:js Changing Background Colour of Button - Change when clicked, remove when another button is clicked Change colour of elements previously clicked Change colour of an element when clicked Cell change background colour with clicked Change button colour
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM