10-16-2017 09:35
10-16-2017 09:35
I'm trying to toggle a background element that lives in my index.gui file. I tried to use the documentation to fix my issue, however i can never seem to alter any styles on the element through JS.
index.gui:
<svg> <g class="noon-bg"> <gradientRect width="100%" height="100%" gradient-type="linear" gradient-x1="50" gradient-y1="0" gradient-x2="100%-50" gradient-y2="0" gradient-color1="#56CCF2" gradient-color2="#2F80ED" /> </g> </svg>
index.js:
import document from "document"; var noonBg = document.getElementsByClassName("noon-bg"); console.log(JSON.stringify(noonBg.style));
console:
[12:32:34 PM]undefined
I've attempted using ids before this with the same result.
Answered! Go to the Best Answer.
10-16-2017 09:57 - edited 10-16-2017 09:58
10-16-2017 09:57 - edited 10-16-2017 09:58
getElementsByClassName() returns an array of objects which have the specified class name.
var noonBg = document.getElementsByClassName("noon-bg")[0];
If you're only ever having one, it's probably best to use an ID.
<svg>
<svg id="noon-bg">
<gradientRect />
</svg>
</svg>
var noonBg = document.getElementById("noon-bg");
10-16-2017 09:57 - edited 10-16-2017 09:58
10-16-2017 09:57 - edited 10-16-2017 09:58
getElementsByClassName() returns an array of objects which have the specified class name.
var noonBg = document.getElementsByClassName("noon-bg")[0];
If you're only ever having one, it's probably best to use an ID.
<svg>
<svg id="noon-bg">
<gradientRect />
</svg>
</svg>
var noonBg = document.getElementById("noon-bg");
10-16-2017 10:20
10-16-2017 10:20
Thanks for your answer, i think it had something to do with the parent element as well, using <svg> element worked like a charm.
Thanks,
Emerson