change color of a text in html using javascript

Question

I'm working on changing the color of some text using a separate .js file. I am a newbie at HTML and JavaScript, please be detailed. Thank you.

This is what I got so far:

htmlfile.html

<html>
<body>
    <p id="demo"> Click the button to change the text in this paragraph. </p>
</body>
</html>

jsfile.js

    var button = document.createElement("button")
    button.innerHTML = "Red or green"
    // Sets or returns the content of an element

    // 2. Append somewhere
    var body = document.getElementsByTagName("body")[0]
    body.appendChild(button)
    // Adds a new child node, to an element, as the last child node

    // 3. Add event handler
    button.addEventListener("click", function () {
        state = !state
        // Attaches an event handler to the specified element

        //var led = document.createElement('LED')
        if (state = 1) {
            document.getElementById("demo").style.color = "red"
        } else {
            document.getElementById("demo").style.color = "green"
        }
        //body.appendChild(led)
    })
}

Possible duplicate of Change text color with Javascript?

Tyler Roper
– Tyler Roper

2017-03-01 23:57:12 +00:00
Commented Mar 1, 2017 at 23:57 — Tyler Roper
– Tyler Roper, Commented Mar 1, 2017 at 23:57

Lakshman Kambam · Accepted Answer · 2017-03-02 00:15:59Z

1

status = 1;
function switchStyle() {
x = document.getElementById("text");
if(status==1) {
    x.style.color = 'blue';
    status = 2;
}
else if(status==2) {
    x.style.color = 'red';
    status = 1;
}
}

<p id="text">This text color will change.</p><br>
<button type="button" onclick="javascript:switchStyle();">Switch Style</button>

answered Mar 2, 2017 at 0:15

Lakshman Kambam

1,61815 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paweł · Accepted Answer · 2017-03-01 23:56:54Z

a couple of advices:

use document.body instead of getElementsByTagName('body')
use semicolons at the end of lines (instructions)
create state var outside addEventListener function
if you compare values in if() condition, use == or === instead =

var button = document.createElement('button');
button.innerHTML = 'Red or green';

document.body.appendChild(button);

var state = 0;

button.addEventListener('click', function (){
   var demo =  document.getElementById("demo");

   if (state === 1) {
     demo.style.color = 'red';
     state = 0;
     } else {
       demo.style.color = 'green';
       state = 1;
    }
});

<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
</body>
</html>

Collectives™ on Stack Overflow

change color of a text in html using javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related