CSS style addition has stopped javascript function from working

Question

I created this javascript function to change the colour of guitar string in an SVG. Originally, the SVG had 'stroke' colours defined in the markup and at that point the function worked, so that when I pressed the button, the colour of the string 'e-low' changed.

However, I decided I wanted to add CSS default style to the stroke colour (which you can see at the stop of the code) because I intend to have functionality so that when the button is pressed a second time, the colour returns to the default colour defined in the style section. Since I've added this, and changed the colour in the SVG to 'None', the javascript function has stopped working and the colour doesn't change whatsoever, and I don't know why.

Before I added the css style element

function svgMod() {
  var s = document.getElementById("e-low");
  s.setAttribute("stroke", "#000000");

}

#e-string,
#b-string,
#g-string,
#d-string,
#a-string,
#e-low {
  stroke: #adad8b;
}

<svg xmlns="http://www.w3.org/2000/svg" ......... <path id="e-string" stroke="none" fill="none" stroke-width="2" d="M502.583,13.046v411.966" />
<path id="b-string" stroke="none" fill="none" stroke-width="2.5" d="M472.366,13.046v411.966" />
<path id="g-string" stroke="none" fill="none" stroke-width="3" d="M440.134,13.046v411.966" />
<path id="d-string" stroke="none" fill="none" stroke-width="3.3" d="M405.887,13.046v411.966" />
<path id="a-string" stroke="none" fill="none" stroke-width="3.5" d="M373.655,13.042v411.965" />
<path id="e-low" stroke="none" fill="none" stroke-width="4" d="M341.423,13.046v411.966" />
</svg>

<button class="btn" onclick="svgMod(); return false;">Test 1</button>

Have you tried s.style.stroke='...' instead?

C3roe
– C3roe

2018-02-07 12:06:25 +00:00
Commented Feb 7, 2018 at 12:06 — C3roe
– C3roe, Commented Feb 7, 2018 at 12:06
CSS styles override SVG attributes.

Niet the Dark Absol
– Niet the Dark Absol

2018-02-07 12:24:57 +00:00
Commented Feb 7, 2018 at 12:24 — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 7, 2018 at 12:24

F0XS · Accepted Answer · 2018-02-07 13:32:13Z

Make sure you have the right viewBox and a proper sizing for the SVG element, I just added a random viewBox to see the guitar strings.

You can read more about viewBox in this link

The viewBox attribute allows you to specify that a given set of graphics stretch to fit a particular container element.

Also as @CBroe mentioned using s.style.stroke = '#000000' fits better to modify the styles of a element.

function svgMod() {
  var s = document.getElementById("e-low");
  s.style.stroke = "#000000";
}

#e-string,
#b-string,
#g-string,
#d-string,
#a-string,
#e-low {
  stroke: #adad8b;
}

<svg xmlns="http://www.w3.org/2000/svg" width="210" viewBox="0 0 600 600">
  <path id="e-string" stroke="none" fill="none" stroke-width="2" d="M502.583,13.046v411.966"/>
  <path id="b-string" stroke="none" fill="none" stroke-width="2.5" d="M472.366,13.046v411.966"/>
  <path id="g-string" stroke="none" fill="none" stroke-width="3" d="M440.134,13.046v411.966"/>
  <path id="d-string" stroke="none" fill="none" stroke-width="3.3" d="M405.887,13.046v411.966"/>
  <path id="a-string" stroke="none" fill="none" stroke-width="3.5" d="M373.655,13.042v411.965"/>
  <path id="e-low" stroke="none" fill="none" stroke-width="4" d="M341.423,13.046v411.966"/>
</svg>

<button class="btn" onclick="svgMod(); return false;">Test 1</button>

Collectives™ on Stack Overflow

CSS style addition has stopped javascript function from working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related