Javascript error in sigil

Bid · 06-11-2020, 10:35 AM

I have to build an interactive ebook for a class. In that there are tables that I like to hide and show columns based on user response. There plent of examples using jquery, etc to do this. But these methods relay on jquery being accessed by internet. This ebook should function without internet too.
An example using jquery worked in sigil. The following example javascript only gives an error on "for" loop construction of the code when put in sigil. What am I doing wrong. This code is completely functional in all the browsers. Thanks for your help

Code:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <table>
    <thead>
      <th id="column-a">1</th>
      <th id="column-b">2</th>
      <th id="column-c">3</th>
      <th id="column-d">4</th>
      <th id="myDIV" style="display:none;">5</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td id="myDIV" style="display:none;">5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td id="myDIV" style="display:none;">5</td>
      </tr>
    </tbody>
  </table>
  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

  <button onclick="myFunction()">Try it</button>

  <div id="myDIV" style="display:none;">
    This is my DIV element.
  </div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

  <script type="text/javascript">
    function myFunction() {
      var elms = document.querySelectorAll("#myDIV");
      
      for (var i = 0; i < elms.length; i++) {

        if (elms[i].style.display === "none") {
          elms[i].style.display = "block";
        } else {
          elms[i].style.display = "none";
        }
      }
    }
  </script>

</body>

</html>

KevinH · 06-11-2020, 10:57 AM

Try using the Inspector in Preview to see the java console and debug your script. Also id attributes must be *unique* so instead your code is probably finding the wrong element and failing.

DNSB · 06-11-2020, 11:18 AM

When I ran epubcheck on your code sample, it complained about multiple errors such as the naked <html> tag, the lack for <tr></tr> tags between the <thead></thead> tags. Then it was unhappy with your javascript.

You might want to check Progressive Enhancement on daisy.org. The sample from there is in the spoiler/code block below and does work in Sigil's preview though not in PageEdit.

Spoiler:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title>Test Script</title>
  <style type="text/css">
       span#secret { color: rgb(255,0,0); }
       
       div#revealed { width: 100%; text-align: center; }
       
       span.letter { 
         font-size: 240%;
         font-weight: bold;
         color: rgb(255,0,0);
         text-shadow: rgb(0,0,0) 1px 1px 2px;
         animation: bleedin 2s;
       }
       @keyframes bleedin {
         from {
           font-weight: normal;
           font-size: 0%;
           background: rgb(255,0,0);
           text-shadow: rgb(0,0,0) 1px 1px 50px;
         }
         to {
           font-weight: bold;
           font-size: 240%;
           background: rgb(255,255,255);
           text-shadow: rgb(0,0,0) 1px 1px 2px;
         }
       }
    </style>
</head>

<body>
  <p>The <span id="code">secret code</span> <span id="secret">D E A D M A N</span> had to be spelled out to gain passage to the pirates' lair.</p>

  <script>
       <![CDATA[
       var code = document.getElementById('code');
           code.style.color = 'rgb(0,0,200)';
           code.onclick = function () { revealCode(); };
           code.setAttribute('role', 'button');
           code.setAttribute('tabindex', 0);
       
       var secret = document.getElementById('secret'); 
           secret.style.visibility = 'hidden';
           secret.style.display = 'none';
           secret.setAttribute('aria-hidden', true);
       
       function revealCode() {
         var revealed = document.getElementById('revealed');
         if (revealed.childNodes.length == 0) {
           var codeArray = 'DEADMAN'.split('');
           var i = 0;
           var revealLetters = setInterval(function(){
             if (i < codeArray.length) {
                var letter = document.createElement('span');
                letter.setAttribute('class', 'letter');
                letter.appendChild(document.createTextNode(codeArray[i]));
                revealed.appendChild(letter);
                i++;
             }
             
             else { 
                clearInterval(revealLetters);
             }
           }, 300);
         }
       }
       ]]>
    </script>

  <div id="revealed" aria-live="assertive"></div>
</body>
</html>

KevinH · 06-11-2020, 11:25 AM

Did you enable Javascript in PageEdit preferences?

DNSB · 06-11-2020, 11:40 AM

Quote:

Originally Posted by KevinH

Did you enable Javascript in PageEdit preferences?

Now that you mention it, no.

Doitsu · 06-11-2020, 12:02 PM

Quote:

Originally Posted by Bid

What am I doing wrong. This code is completely functional in all the browsers.

Browsers tend to be more forgiving than ebook readers. You'll need to wrap your Javascript code in <![CDATA[ ... ]]> tags.

Spoiler:

Of course, as KevinH has already pointed out, your book will be invalid because all ids need to be unique. You might want to select the text that you want to hide via class attributes.

KevinH · 06-11-2020, 12:17 PM

Yes, the "<" sign in the for loop is the culprit. As Doitsu explain using CDATA is a solution. As is including the script from a separate javascript resource.

You can wrap javascript // comment indicators around the CDATA piece as well for some browsers and e-readers ala:

Code:

//<![CDATA[
//]]>

And I agree with Doitsu using a class selector would be better than duplicating id attributes.

Bid · 06-12-2020, 04:30 AM

Quote:

Originally Posted by KevinH

Try using the Inspector in Preview to see the java console and debug your script. Also id attributes must be *unique* so instead your code is probably finding the wrong element and failing.

Hi Kevin,
Thanks for your reply. May be I did not explain myself well. I know about id must be unique, even with this error it works on all browsers, when I put this code to sigil, it complain that an error detected around or above "for". I figured it , it's the "for" statement itself that it complains about, but I do not see why.

Bid

Bid · 06-12-2020, 05:33 AM

Thank you all. Yes the CDATA tag solved the problem. Now everything works. Yes, I cleaned the code too. DNSB you are write javascripts does not work within SIGIL but the epub generated works well.
Once again thanks you all so much.
Bid

KevinH · 06-12-2020, 08:04 AM

Yes they do work within Sigil and PageEdit in an epub3 epub, You just need to enable Javascript in Sigil and PageEdit's Preferences. That is how I tested your code.

DNSB · 06-12-2020, 11:19 AM

Quote:

Originally Posted by Bid

DNSB you are write javascripts does not work within SIGIL but the epub generated works well.

Not quite right. What I said was the Javascript worked in Sigil but not in PageEdit. And was rightly embarrassed when KevinH asked if I had enabled Javascript in PageEdit as well as Sigil. A Doh! moment.

06-11-2020, 12:17 PM	#7
KevinH Sigil Developer Posts: 8,478 Karma: 5703586 Join Date: Nov 2009 Device: many	Yes, the "<" sign in the for loop is the culprit. As Doitsu explain using CDATA is a solution. As is including the script from a separate javascript resource. You can wrap javascript // comment indicators around the CDATA piece as well for some browsers and e-readers ala: Code: //<![CDATA[ //]]> And I agree with Doitsu using a class selector would be better than duplicating id attributes.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sigil Error Message: Book File Would Not Open in Sigil	fkustaa	Sigil	9	04-27-2025 05:11 AM
Sigil Error	PapaKilo	Sigil	27	07-04-2016 11:08 AM
Create a javascript quizz for Epub3 in Sigil	BertrandThibaut	Sigil	3	01-26-2014 09:04 AM
Sigil error	Alonso Alvarez	Sigil	8	10-12-2013 08:29 PM
Javascript error on conversion azw4 to PDF	SpecterGT260	Conversion	2	01-15-2013 10:30 PM

06-11-2020, 10:57 AM	#2
KevinH Sigil Developer Posts: 8,478 Karma: 5703586 Join Date: Nov 2009 Device: many	Try using the Inspector in Preview to see the java console and debug your script. Also id attributes must be unique so instead your code is probably finding the wrong element and failing.

06-11-2020, 11:25 AM	#4
KevinH Sigil Developer Posts: 8,478 Karma: 5703586 Join Date: Nov 2009 Device: many	Did you enable Javascript in PageEdit preferences?

06-12-2020, 05:33 AM	#9
Bid Junior Member Posts: 4 Karma: 10 Join Date: Jun 2020 Device: ipad	Thank you all. Yes the CDATA tag solved the problem. Now everything works. Yes, I cleaned the code too. DNSB you are write javascripts does not work within SIGIL but the epub generated works well. Once again thanks you all so much. Bid

06-12-2020, 08:04 AM	#10
KevinH Sigil Developer Posts: 8,478 Karma: 5703586 Join Date: Nov 2009 Device: many	Yes they do work within Sigil and PageEdit in an epub3 epub, You just need to enable Javascript in Sigil and PageEdit's Preferences. That is how I tested your code.

Advert

Advert