Adding An Svg That Has 3 Paths To The .innerhtml Part Of A Button

I am trying to add an SVG that has 3 paths to a button code. I know how to do One Path, but doing multiple, I am confused on how to do that. I need help adding the SVG to the .inne

Solution 1:

Use ' ' quotes to contain the values of your SVG code that you are putting inside the button using the inline JavaScript.

Why? Because you have your inline JavaScript inside " " of the onClick attribute, so the JS inside it uses ' ' for the variables, now if you are going to use " i.e double quotes to contain the values of attributes the parser will think that that double quote is the end of the onClick attribute.

Here's an example of what you need to have:

playButton2.innerHTML = '<svgwidth=\'100\' height=\'100\' version=\'1.1\' viewBox=\'-106766\'><pathd=\'M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7C65.5,15.1,50.9,0.5,32.8,0.5z \' fill=\'orange\'></path><pathd=\'M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z\' fill=\'black\'></path><pathd=\'M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5C47.1,33.9,47.1,32.5,46.2,31.9z\' fill=\'blue\'></path></svg>';

Each of the single quotes has a \ before it to escape the character and tell the parser that it isn't the end of the quotes surrounding the variable's value.

Solution 2:

In the first code we have the HTML for SVG inside the jshttps://jsfiddle.net/rvyv49oy/1/

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; border: 3px solid #0059dd;"
  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' version=\'1.1\' viewBox=\'-1 0 67 66\'><path d=\'M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z \' fill=\'red\'></path><path d=\'M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z\' fill=\'black\'></path><path d=\'M27.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C29,21.5,28.5,21,27.9,21zM40.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C42,21.5,41.5,21,40.9,21z\' fill=\'blue\'></path></svg> ';
player.play();
} else {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' version=\'1.1\' viewBox=\'-1 0 67 66\'><path d=\'M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z \' fill=\'orange\'></path><path d=\'M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z\' fill=\'black\'></path><path d=\'M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z\' fill=\'blue\'></path></svg>';
player.pause();
}"><svg width="100" height="100" version="1.1" viewBox="-1 0 67 66"><path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path><path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path><path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path></svg></button><audio id="player2" style="display:none;"><source src='' type='audio/mpeg'></source></audio>

Using display property, has it in the HTML button, only hiddenhttps://jsfiddle.net/kLr5tLLe/1/

<buttonid="playButton2"style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; border: 3px solid #0059dd;"onclick=" 
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}"><svgstyle="display: none;"class="pause"width="100"height="100"version="1.1"viewBox="-1 0 67 66"><pathd="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z "fill="red"></path><pathd="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z"fill="black"></path><pathd="M27.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C29,21.5,28.5,21,27.9,21zM40.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C42,21.5,41.5,21,40.9,21z"fill="blue"></path></svg><svgstyle="display: none;"class="play"width="100"height="100"version="1.1"viewBox="-1 0 67 66"><pathd="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z "fill="orange"></path><pathd="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z"fill="black"></path><pathd="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z"fill="blue"></path></svg><svgclass="initial"width="100"height="100"version="1.1"viewBox="-1 0 67 66"><pathd="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z "fill="orange"></path><pathd="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z"fill="black"></path><pathd="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z"fill="blue"></path></svg></button><audioid="player2"style="display:none;"><sourcesrc=''type='audio/mpeg'></source></audio>