What's wrong with my browser JavaScript engine on jsbin.com?

Question

I am new to JavaScript. I am trying to add text into a p tag and targeting it using the ID. Now, using the document.getElementById('text').innerHTML, when I set the text that contains the do word, it returns the original text in the p tag.

document.getElementById('text').innerHTML='as I add??? do';

<p id="text" class="abc">Hello</p>

It is happening only with the do word in between. Here's a GIF explaining the issue:

I hope I am doing this right. But, there might be some quirk that is messing with me.

It looks like jsbin is refreshing the frame. If you click `run with js`, it should output the proper value — Derek Pollard, Aug 18 '16 at 18:45
When it switches back to "Hello," what does pressing [Run] in the top-right do? — Sampson, Aug 18 '16 at 18:46
Also, if you want to insert plain text, with no HTML, you can use `textContent` instead of `innerHTML`. Not a difference, but feels like more correct for me :) Greets — jedrzejginter, Aug 18 '16 at 18:48
Thanks @You . I did that time, but it wasn't working, now it is working. — suprxd, Aug 18 '16 at 18:49
it looks like bug in jsbin. It throws syntax error like `"SyntaxError: Unexpected token { at ...` — shyammakwana.me, Aug 18 '16 at 18:49
lol, it will work when you bypass `o`, like `'this is abc d\o '` — shyammakwana.me, Aug 18 '16 at 18:51
Probably the same as this bug: https://github.com/jsbin/jsbin/issues/2264 (workaround in the thread) — JJJ, Aug 18 '16 at 18:54
FYI - works fine in jsFiddle: https://jsfiddle.net/h7v1qb94/ — Rahul Desai, Aug 18 '16 at 18:58

shyammakwana.me · Accepted Answer · 2016-08-18T19:07:09.247

3

As commented by Juhana and jsbin member on github, it's a false positive, this can be achieved by adding // noprotect in the code.

e.g.

console.clear(); 
document.getElementById('abc').innerHTML = 'this is abc do '; 

// noprotect

p.s. As of now it's to work around to loop protection, until it's get fixed.

edited Aug 18 '16 at 19:07

answered Aug 18 '16 at 19:00

shyammakwana.me

5,562
2
29
50

score 1 · Answer 2 · answered Aug 18 '16 at 19:15

When you use

document.getElementById("text").innerHTML = "abc a d";

They load this document (pretty formatted by me):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style id="jsbin-css"></style>
  </head>
  <body>
    <p id="text">Hello</p>
    <script>
    try {
      document.getElementById("text").innerHTML = "abc a d";
    } catch (error) {
      throw error;
    }
    //# sourceURL=wecinoqeje.js
    </script>
  </body>
</html>

But when you use do, they completely screw up your code.

document.getElementById("text").innerHTML = "abc a do";

They probably think it's a do-while, because they have something called "loop protection". The loaded document is

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style id="jsbin-css"></style>
  </head>
  <body>
    <p id="text">Hello</p>
    <script>
    try {
      {
        ;
        window.runnerWindow.protect.protect({
          line: 1,
          reset: true
        });
        document.getElementById("text")
        {
          if (window.runnerWindow.protect.protect({ line: 1 }))
            break;
          .innerHTML = "abc a do";
        }
      }
    } catch (error) {
      throw error;
    }
    //# sourceURL=wecinoqeje.js
    </script>
  </body>
</html>

That's a syntax error. So your code does not run.

What's wrong with my browser JavaScript engine on jsbin.com?

2 Answers2