htmlcoding3456 htmlcoding3456 - 1 year ago 125
HTML Question

How do I prevent Blogger from parsing my code?

Some help please....

Is there anyone on here who is able to help me get this code to work on blogger, like it does on both codepen/jsfiddle?

Something is not computing properly, and how do I fix that so it works on there?

It woks fine on jsfiddle, codepen, but on blogger it gets all messed up.

See Here: jsfiddle link is on there also.

https://testpage34567.blogspot.com/

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;"
onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 60 100\'><path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'></svg>';
player.play();
playButton2.style.border='none'
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
} else {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 85 100\'><path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'></svg>';
player.pause();
playButton2.style.border='none'
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
}">
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100">
<path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
</svg>
</button>

<audio id="player2" style="display:none;">
<source src='' type='audio/mpeg' />
</source>
</audio>

Answer Source

You need to escape < with &lt; and > with &gt; inside javascript string and end JS statement with semicolon ;

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;"
onclick="  
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 60 100\'&gt;&lt;path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'&gt;&lt;/svg&gt;';
player.play();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19';
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
} else {
playButton2.innerHTML = '&lt;svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 85 100\'&gt;&lt;path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'&gt;&lt;/svg&gt;';
player.pause();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19';
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
}">
  <svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100">
    <path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"/>
  </svg>
</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download