How would i apply CSS to some text via DOM? (No Libraries, Just Javascript)

Question

We are currently learning how to use the DOM and some javascript commands to make dynamic websites. My main and only problem so far is that my CSS won't apply to the HTML I have added to my <p> tag with the id="paragraph":

1.What am i doing wrong?

2.What can i do differently?

3.What can help clean up my code?

function Music() {
var string = document.getElementById('text').value.match( /[^\.!\?]+
[\.!\?]+/g ); // This searches through our text, puts results into an 
array
    for (var i = 0; i < string.length; i++) { // This goes through our "string array"
        var space = string[i].match(/\s/g ); // Counts the amount of 
spaces in each string.
        var wrapEl = document.createElement("span"); // Create a span tag
        wrapEl.innerHTML = string[i]; // place strings into span tag
// This clears the paragraph element and refills it with the new text output.
        if (string.length > 0) {
        document.getElementById("paragraph").innerHTML = "You didn't

write anything!";

        } else {
        console.log("You Didn't write anything!");
        }    
        switch (space.length) {
            case space <=2: //Tiny (0-2 words) - Yellow Highlight
                span.addClass("style1");
                break;
            case space <=5: //Short (3-5 words) - Red Highlight
                span.addClass("style2");
                break; 
            case space <=14: //Medium (6-14 words) - Green Highlight
                wrapEl.addClass("style3");
                break;
            case space >15: //Long (15+ words) - Blue Highlight
                wrapEl.addClass("style4");
                break;}

        var paragraph = document.getElementById("paragraph"); 
        paragraph.appendChild(wrapEl); // append span tag to paragraph tag via id
    }
}

!!!For reference, Im using a tag in my HTML as the place to type your text. And i put all my CSS classes in the with the tag.!!!

You're trying to add classes to `wrapEl` before you define it. You're trying to add classes to `span` which you never define at all. — Daniel Beck, Nov 21 '17 at 00:04
So i changed it (I will update my code in a bit) but still none of the CSS applies. Ill continue working on it. — Seth Villamil, Nov 21 '17 at 21:31

agrm · Accepted Answer · 2017-11-21T22:49:41.063

1

You are currently trying to add a class to the DOM elements using .addClass(). This is actually a jQuery method, not vanilla JavaScript. I would rather suggest you add a class using classList.add().

Note: classList is not supported in Internet Explorer 9 and below. If you need to support older versions of IE, go with className += "style1" as described in this answer

You also have a few instances of span.addClass("style1"). From the code posted in your question, there is no span variable. Should this be wrapEl?

The following should do it:

var wrapEl = document.querySelector('span');

wrapEl.classList.add('style1')

.style1 {
  color: red
}

<p>This is unaffected. Should be black.</p>

<span>This has .style1 applied. Should be red</span>

edited Nov 21 '17 at 22:49

answered Nov 21 '17 at 22:44

agrm

3,735
4
26
36

So, im not getting any errors now in the console, but my text won't show up. i want to use appendChild and place the items in the array created by my var "string" into my created span tag and then into the paragraph element for the user to view. would this work? – Seth Villamil Nov 22 '17 at 21:57
I've got a few mins to debug your script [in the chat](https://chat.stackoverflow.com/rooms/17/javascript) if you want. That way we won't flood the comments. – agrm Nov 22 '17 at 22:01
That would be nice, i hope may count is eligible though – Seth Villamil Nov 22 '17 at 22:02
yea R.I.P. My account rep is not >= 20. – Seth Villamil Nov 22 '17 at 22:04
Oh well. If you can post your current code at [JSFiddle](https://jsfiddle.net) or [JSBin](https://jsbin.com) we can have a look. – agrm Nov 22 '17 at 22:05
will do real fast. – Seth Villamil Nov 22 '17 at 22:09

How would i apply CSS to some text via DOM? (No Libraries, Just Javascript)

1 Answers1