Onclick does not work on Readium

Monbuster · 08-17-2020, 09:59 PM

Here my xhtml code in SIGIL but there is no action when I click on the radio button in the book using readium. What can I do?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Connaissez-vous bien votre livre?</title>
</head>

<body>
<p><h1>Questionnaire pour MADAME BOVARY</h1></p>

<div><img src="https://www.bovary.fr/dossiers/decli/accueil01.jpg" alt="Image de Madame Bravery non disponible"></img></div>
<p><em>2e partie, chapitre 14 : Rétablissement d’Emma (le voyage à Rouen).Illustration de A. Richemont, gravée à l'eau-forte par C. Chessa, Paris, F. Ferroud, 1905</em></p>
<hr/>

<p>Qu'est-ce que Madame Bovary admire le plus dans la vie?</p>
<ul>
<li><input type="radio" name="admire" onclick="javascript:document.getElementById('repon se1').style.display = 'block';"/>Les montagnes<span id="reponse1" style="display: none;font-weight:bolder;color:#800000;" class="feedback">
(Oups! Il faut relire la deuxième partie du livre)</span></li>
<li><input type="radio" name="admire" onclick="javascript:document.getElementById('repon se2').style.display = 'block';"/>Les couchers de soleil<span id="reponse2" style="display: none;font-weight:bolder;" class="feedback">
(Bravo! Tu as bien retenu l'information)</span></li>
<li><input type="radio" name="admire" onclick="javascript:document.getElementById('repon se3').style.display = 'block';"/>Les grandes rivières<span id="reponse3" style="display: none;font-weight:bolder;color:#800000;" class="feedback">
(Oups! Il faut relire la deuxième partie du livre)</span></li>
</ul>

<hr/>
</body>

</html>

KevinH · 08-17-2020, 10:47 PM

Your "id" values for .getElementById is showing a space in the middle of the id value in your code above.

For example: Instead of "response2" your code refers to 'respon se2'

Perhaps a nbsp, zero width space or normal space got stuck in somehow?

BetterRed · 08-18-2020, 05:55 AM

Kevin - I think that's a glitch on the forum rendering, it drop spaces into long strings.

Quote:

Originally Posted by Monbuster

Here my xhtml code in SIGIL but there is no action when I click on the radio button in the book using readium. What can I do?

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Connaissez-vous bien votre livre?</title>
</head>

<body>
<p><h1>Questionnaire pour MADAME BOVARY</h1></p>

<div><img src="https://www.bovary.fr/dossiers/decli/accueil01.jpg" alt="Image de Madame Bravery non disponible"></img></div>
<p><em>2e partie, chapitre 14 : Rétablissement d’Emma (le voyage à Rouen).Illustration de A. Richemont, gravée à l'eau-forte par C. Chessa, Paris, F. Ferroud, 1905</em></p>
<hr/>

  <p>Qu'est-ce que Madame Bovary admire le plus dans la vie?</p>
  <ul>
    <li><input type="radio" name="admire" onclick="javascript:document.getElementById('reponse1').style.display = 'block';"/>Les montagnes<span id="reponse1" style="display: none;font-weight:bolder;color:#800000;" class="feedback">
    (Oups! Il faut relire la deuxième partie du livre)</span></li>
    <li><input type="radio" name="admire" onclick="javascript:document.getElementById('reponse2').style.display = 'block';"/>Les couchers de soleil<span id="reponse2" style="display: none;font-weight:bolder;" class="feedback">
    (Bravo! Tu as bien retenu l'information)</span></li>
    <li><input type="radio" name="admire" onclick="javascript:document.getElementById('reponse3').style.display = 'block';"/>Les grandes rivières<span id="reponse3" style="display: none;font-weight:bolder;color:#800000;" class="feedback">
    (Oups! Il faut relire la deuxième partie du livre)</span></li>
  </ul>

 <hr/>
</body>

</html>

BR

KevinH · 08-18-2020, 10:25 AM

Quote:

Kevin - I think that's a glitch on the forum rendering, it drop spaces into long strings.

I did not know that. So it just happened to mess up rendering the ids on my screen.

Hmm... the only other things I can think of are:

1. Javascript is only supported in epub3 but your code above uses an epub2- style Doctype and not an epub3 Doctype

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

vs

Code:

<!DOCTYPE html>

2. Perhaps Readium like Sigil has a enable and disable javascript setting?

Either way, this code works properly on Sigil (once the enable javascript is set in Preferences before the epub3 is loaded) and once the proper DOCTYPE is used.

So Perhaps you should be asking this on a Readium support forum. Both Readium and Sigil are both Chrome browser engine based so if it works on Sigil it should work on Readium.

08-17-2020, 09:59 PM	#1
Monbuster Junior Member Posts: 1 Karma: 10 Join Date: Aug 2020 Device: readium	Onclick does not work on Readium Here my xhtml code in SIGIL but there is no action when I click on the radio button in the book using readium. What can I do? <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Connaissez-vous bien votre livre?</title> </head> <body> <p><h1>Questionnaire pour MADAME BOVARY</h1></p> <div><img src="https://www.bovary.fr/dossiers/decli/accueil01.jpg" alt="Image de Madame Bravery non disponible"></img></div> <p><em>2e partie, chapitre 14 : Rétablissement d’Emma (le voyage à Rouen).Illustration de A. Richemont, gravée à l'eau-forte par C. Chessa, Paris, F. Ferroud, 1905</em></p> <hr/> <p>Qu'est-ce que Madame Bovary admire le plus dans la vie?</p> <ul> <li><input type="radio" name="admire" onclick="javascript:document.getElementById('repon se1').style.display = 'block';"/>Les montagnes<span id="reponse1" style="display: none;font-weight:bolder;color:#800000;" class="feedback"> (Oups! Il faut relire la deuxième partie du livre)</span></li> <li><input type="radio" name="admire" onclick="javascript:document.getElementById('repon se2').style.display = 'block';"/>Les couchers de soleil<span id="reponse2" style="display: none;font-weight:bolder;" class="feedback"> (Bravo! Tu as bien retenu l'information)</span></li> <li><input type="radio" name="admire" onclick="javascript:document.getElementById('repon se3').style.display = 'block';"/>Les grandes rivières<span id="reponse3" style="display: none;font-weight:bolder;color:#800000;" class="feedback"> (Oups! Il faut relire la deuxième partie du livre)</span></li> </ul> <hr/> </body> </html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
EPUB 3.0 page breaks in Readium	xmlgirl	ePub	1	11-07-2012 12:27 PM
Calibre and Readium	thepublicdan	Devices	0	10-16-2012 05:21 PM
Readium App for Android/iOS	royroy	General Discussions	1	09-24-2012 09:19 AM
Installing Readium validator	AlexBell	ePub	4	08-16-2012 06:41 AM
Dynamic text with onclick & innerHTML?	Doitsu	ePub	3	01-07-2011 06:33 PM

08-17-2020, 10:47 PM	#2
KevinH Sigil Developer Posts: 7,637 Karma: 5433388 Join Date: Nov 2009 Device: many	Your "id" values for .getElementById is showing a space in the middle of the id value in your code above. For example: Instead of "response2" your code refers to 'respon se2' Perhaps a nbsp, zero width space or normal space got stuck in somehow?

Advert