Need help to control my SVG animation with JavaScript

Question

I can't understand why , my SVG elements are showing undefined , when I try to access them through DOM with JavaScript.
I referred stack overflow too and applied suggestions , but its not working
https://code.sololearn.com/WBbS1YzQWcMN/?ref=app

Answer 1

Ok I've reviewed your code and found a solution for accessing elements inside the svg element:

var svg = document.getElementById('svg1');
// Access text element with id 'texthi':
var text = svg.getElementById("texthi");
// Note: You don't need any svga variable, because svg is already a [object SVGSVGElement].

Be aware of which comparison operator to use:
== compare their values
=== compare if their type is equal
In your function hi.onclick you are using the second one:
if(text.style.opacity==="0"){
This won't work, as you want to check if the value of opacity is 0 or 1.

Rewrite your function hi.onclick to following:
hi.onclick=function(){
var text=svg.getElementById('texthi');
if(text.style.opacity==0){
text.style.opacity=1;
}
else if(text.style.opacity==1){
text.style.opacity=0;
}
};

Tested in Chrome 62 and worked.
Hope I could help.

Answer 2

many thanks to you Patrick
finally two buttons working now, thx to your valuable suggestions which will help to prevent same errors in future

https://code.sololearn.com/WBbS1YzQWcMN/?ref=app