Javascript Color button

javascript change button color onclick
button css
change background color on button click in javascript
button html
change background color using javascript function
css button hover effects
javascript change input text color
toggle background color javascript

I have the following Problem: I want to Change <p> color on a click, that changes back if i click the button again. I tried for several hours and have no clue how to do that. Here is the code

<div class="items">
   <div>
    <button onclick="colorChange()"></button>
   </div>
  <p>
   ORT: TARDES
   <br>
   BERUF: Der Doktor   
  </p>
</div>

I don't have any good Javascript knowledge. Thanks for the Answers! I am still new to JS.

EDIT: I tried this. Its not completed or functioning at all

function colorChange(){
    i = 0
    cObject = document.querySelector('.maincontainer>.container>.items>p');
    console.log(cObject.childNodes);
    cObject.style.color = "red";
    if (cObject.sryle.color == "red"){
        alter(test);
    }
}

Don't use inline styles. Instead, define and toggle a CSS class that affects the color. Example:

const colorChangeBtns = document.querySelectorAll('.colorChangeBtn'); // get a NodeList of all color change buttons

for (const btn of colorChangeBtns) { // iterate over the list
  btn.addEventListener('click', (event) => { // when a button is clicked
    event // event is implicitly passed to the handler function
      .target // event.target is the element on which the event occurred (the button)
      .closest('.items') // starting from the button, find the closest element with .items
      .querySelector('p') // and inside that, find the first p element
      .classList.toggle('red'); // and on its list of CSS classes, toggle this class name
  })
}
.red {
  color: red;
}
<div class="items">
  <div>
    <button class="colorChangeBtn">Change color</button>
  </div>
  <p>
    ORT: TARDES
    <br> BERUF: Der Doktor
  </p>
</div>

<div class="items">
  <div>
    <button class="colorChangeBtn">Change color</button>
  </div>
  <p>
    ORT: TARDES
    <br> BERUF: Der Doktor
  </p>
</div>

Changing button color programmatically, document.getElementsByTagName returns an list of elements not a single element. You need to convert it to an array with Array.from and then� Introduction In this example, we will discuss how we change the Background Color of a Button with JavaScript. Here we will call the function on the onmouseover event of the Button Like this: <input type="button" onmouseover="ChangeColor ()" value="Button" id="btn1" />

You can work with values. Initialize the color with red, for the first click then check if your value it's red or black:

function colorChange() {

  // let cObject = document.querySelector('.maincontainer>.container>.items>p');
  let cObject = document.querySelector('.items>p');
  
  cObject.style.color = "red"
  
 if (cObject.value == "black") {
    cObject.value = "red";
    cObject.style.color = "red"
  } else {
    cObject.value = "black";
    cObject.style.color = "black"
  }
 
}
<div class="items">
  <div>
    <button onclick="colorChange()" value="black"> change color</button>
  </div>
  <p>
    ORT: TARDES
    <br> BERUF: Der Doktor
  </p>
</div>

Change color of button with javascript, <input type="button" onmouseover="ChangeColor()" value="Button" id="btn1" />. Now we write the javascript code: <script language="javascript">� Given an HTML document and the task is to change the background color of the document using JavaScript and jQuery. Approach 1: This approach uses JavaScript to change the background color after clicking the button. Use HTML DOM Style backgroundColor Property to change the background color after clicking the button. This property is used to set the background-color of an element.

You can get that using this code

window.flag=false;
function changeColor(){
	var toChange= document.getElementById("red");
    window.flag=!window.flag;
    if(window.flag){
       toChange.style.color="red";
    }else{
       toChange.style.color="black";
    }
}
<button onClick="changeColor()">Change color</button>
<p id="red"> ORT: TARDES<br>BERUF: Der Doktor  </p>

CSS Buttons, KodeBase. 2.63K subscribers. Subscribe. In this video tutorial, you will learn how to change Duration: 4:21 Posted: Nov 11, 2019 function init() { document.getElementById("about").style.color = 'blue'; } With innerHTML you get/set the content of an element. So if you would want to modify your title, innerHTML would be the way to go.

Change The Background Color of a Button with JavaScript., How to change the background color after clicking the button in JavaScript ? Last Updated: 11-06-2019. Given an HTML document and the task is to change the� I want to change the color of a button when it is clicked and have added this getElementById line in the function called by onclick but when I add the line the function won't run.

How to Change Button Color OnClick in Javascript, I want to change the color of a button when it is clicked and have added this getElementById line in the function called by onclick but when I add� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

How to change the background color after clicking the button in , Hi All, I have two client side controls(buttons).., 1.Yes, 2.No When i press Yes, it should make the button to green and the other button to� color: Specifies the background color. Look at CSS Color Values for a complete list of possible color values: transparent: Default. The background color is transparent (underlying content will shine through) initial: Sets this property to its default value. Read about initial: inherit: Inherits this property from its parent element. Read about inherit

Comments
  • Hi, even if you JS tries did not worked, could you please still add them. It might help us help you.
  • There's a typo: sryle. Also, you're setting the color to "red", then check the color in the next line. How is it ever going to be anything other than "red"? And where is alter()?
  • As i mentioned its not working at all or complete, thats why iam asking for a alternative.