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>