JS cannot change class name

Asked Jul 28 '17 at 10:59

Active Jul 28 '17 at 11:03

Viewed 43 times

I have the following CSS to create triangles:

.triangle-up {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7.5px 10px 7.5px;
    border-color: transparent transparent #58BE23 transparent;
    margin-bottom: 15px;
    margin-let: 2px;
    display: inline-block;
    webkit-transform: rotate(360deg);
}

.triangle-down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 7.5px 0 7.5px;
  border-color: #F44242 transparent transparent transparent;
  margin-bottom: 15px;
  margin-right: 2px;
  display: inline-block;
  webkit-transform: rotate(360deg);
}

My HTML is like so:

<script>
    document.getElementById("p5").className = "triangle-up"
</script>
Here is a triangle<i class="triangle-down" id="p5"></I>

I want to replace triangle-down with triangle-up. It doesn't seem to be working though. What am I doing wrong here?

edited Jul 28 '17 at 11:03

Quentin

914,110
126
1,211
1,335

asked Jul 28 '17 at 10:59

Kex

8,023
9
56
129

When the code runs, the triangle doesn't exist yet. – Jul 28 '17 at 11:03
@ChrisG how do you mean? – Kex Jul 28 '17 at 11:15
Move the ` – Jul 28 '17 at 11:16
The HTML page is executed in a top-down sequential manner. So the script is executed first but the `` is not ready yet. Move the script below the ``, it will work – Priyanjit Jul 28 '17 at 11:18
I tired that and it's still not finding it. JS error console: `Cannot set property 'className' of null`. – Kex Jul 28 '17 at 14:18

JS cannot change class name

0 Answers0