How do I prevent Blogger from parsing my code?

asasass · September 28, 2017, 4:56pm

Some help please…

This is what happens to the code after I hit save.
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:
https://testpage34567.blogspot.com/

Code:

<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>

I think it has something to do with this part of the code:

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>';

Mittineague · September 28, 2017, 5:19pm

What happens when you temporarily change the code to

//if (player.paused) { 
if (1 == 1) { 
...

asasass · September 28, 2017, 5:24pm

Like This:

I tried it in blogger and it still does the same thing.

Mittineague · September 28, 2017, 5:46pm

I think for Blogger you will need to either wrap the JavaScript in <![CDATA[ ... ]]> or pull it in from an external URL - OR - put JavaSript inside of <script> instead of an in-line event.

Blogger seems to deal with JavaScript fine when it’s inside <script> HTML elements so I think you should start with that approach.

Paul_Wilkins · September 28, 2017, 9:05pm

Oh no - I hate to poke the stick but this might mean that he has to start using proper technique and recommended advice.

asasass · September 28, 2017, 9:46pm

I would like a 2nd, 3rd, 4th opinion please.

Mittineague · September 28, 2017, 10:50pm

Another option would be to move off of Blogger. You would then have more control of what you can upload and run without confronting hosting limitations.

Well, there will likely be some limitations, but no where near as many as with a “free” host. eg. For a few dollars a month you should be able to send a fair amount of emails, store a good amount of image files, serve a good amount of traffic etc. important: check before you commit to purchase that the host will meet your expected needs for the foreseeable future.

asasass · September 29, 2017, 12:28am

Doing this works inside blogger.

Would this be the only way to do it?

In other words, would there be a way to do it without separating both codes?

<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="btnClickCallback()">
  <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"/>
  </path></svg>
</button>

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


<script type="text/javascript">
var button = document.getElementById('playButton');
var player = document.getElementById('player2');

function btnClickCallback() {
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\')';
  }
}
</script>

asasass · September 29, 2017, 12:42am

Is there any possible way to formulate the above code into this one?

<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>

Paul_Wilkins · September 29, 2017, 1:41am

No there is no other possible way to do it with Blogger.

There is a rule of thumb we are giving the wrong answer on a forum helps to promote the correct answer coming in from other people. So by that logic, I invite anybody else to supply another formulation other than the recommended script tag, that works on Blogger if there is one.

asasass · October 2, 2017, 4:43pm

This works inside of blogger,

Any thoughts on the method of resolving the issue?

You need to escape < with < and > with > inside javascript string and end JS statement with semicolon ;
https://stackoverflow.com/a/46528723/6486453

Code:

Working:
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('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"/>
  </path></svg>
</button>

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

asasass · October 2, 2017, 5:43pm

I’m trying to add this:

<svg style="background-color:#000000;" width="266" height="102" viewBox="0 -3 85 106">
  <path fill="currentColor" style="fill:black; stroke: #E77D19; stroke-width:3px;" 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"></path>
</svg>

inside this:

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>';

And I did that here:

playButton2.innerHTML = '<svg width=\'266\' height=\'100\' style=\'color:#E77D19; stroke-width:3px;\' viewBox=\'0 -3 85 106\'><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>';

But stroke-width:3px; isn’t working.

What am I doing wrong?

asasass · October 2, 2017, 8:05pm

I just figured it out:

color:black; stroke: #E77D19; stroke-width:3px;

I am curious to know, why we use

color:black; instead of fill:black;


playButton2.innerHTML = '&lt;svg width=\'85\' height=\'100\' style=\'background-color:#cfc;color:black; stroke: #E77D19; stroke-width:3px;\' viewBox=\'0 -3 85 106\'&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;';

Paul_Wilkins · October 2, 2017, 9:15pm

color is what provides an indirect value for fill, among other color related commands.
The SVG color spec details how this works.

Paul_Wilkins · October 2, 2017, 10:05pm

Oh, and the main reason why, is to make it easier for the developer. When you have paths all using the same color, using currentColor allows you to more easily change the color.
Instead of having to change the color in potentially hundreds of places, it’s only the one place that you need to change the color, and the currentColor property will use that changed color instead.

system · January 2, 2018, 5:05am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.