Thread: Javascript error in sigil
View Single Post
Old 06-11-2020, 12:02 PM   #6
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,739
Karma: 24031403
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Bid View Post
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:
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>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title></title>
  <script type="text/javascript">
    <![CDATA[
        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>
</head>

<body>
    <table>
        <thead>
            <tr>
                <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>
            </tr>
        </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>
</body>
</html>


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.
Last edited by Doitsu; 06-11-2020 at 12:09 PM.
Doitsu is offline   Reply With Quote