Name input & output

  1. 6 months ago

    I am attempting to have a user input their name and the name then prints in other places in the book. I was able to get this to work using Sigil and HTML/JS but I can't seem to get PubCoder to like what I'm doing. I'm assuming I'm inputting the code incorrectly and perhaps in the wrong places (smart objects vs page/project code). Any guidance would be very much appreciated. I am a university student with limited knowledge of HTML/JS but my capstone project is unfortunately centered around it. Here are the basics of what I had in Sigil:

    HTML:

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    <head>
        <meta charset="UTF-8"/>
        <title>BE SMART with YOUR HEART</title>
        <link rel="stylesheet" href="../Styles/styles.css" type="text/css"/>
        <script defer="" src="../Scripts/script.js"></script>
    </head>
    <body>
        <div class="header">
            Enter your name: <input type="text" id="nameInput"/>
        </div>
        <div class="content">
            <h1>BE SMART with YOUR HEART</h1>
            <p>My name is Benjamin. Everybody calls me Ben. You can call me Ben too because you are my new friend, <span class="namePlaceholder"></span>. I play on the Dizzy Dingers baseball team. It is a nice day outside for our big ball game. There are a lot of people here today. It is like the whole town is here to watch us play.</p>
            <p>Kendra is always on the move. She likes to swim and run track. Some kids can do that but others will have to be careful. It is important to know that it is okay to be careful because all kids are special, <span class="namePlaceholder"></span>.</p>
        </div>
    </body>
    </html>

    JS:

    document.addEventListener('DOMContentLoaded', function() {
        const nameInput = document.getElementById('nameInput');
        const namePlaceholders = document.querySelectorAll('.namePlaceholder');
    
        if (nameInput) {
            nameInput.addEventListener('input', function() {
                const name = nameInput.value;
                namePlaceholders.forEach(placeholder => {
                    placeholder.textContent = name;
                });
            });
        }
    });
  2. 5 months ago

    Angelo S

    Jul 1 Administrator

    Hello Patrick,
    just put the content of your "body" tag in a smart object, then put the javascript in the Code → Page → Javascript section: you don't need the DOMContentLoaded event listener though, that code will already be executed at page load.

  3. Edited 5 months ago by Patrick J

    Thank you for your reply Angelo. I truly appreciate it.

    I am having one other issue that I'm having a hard time with. When the user swipes to navigate, the audio that's set to start on "Load" does not work. When the user uses the navigation arrows, they do work. Is this just the expected outcome and I should just disable swipe navigation?

  4. Angelo S

    Jul 10 Administrator
    Edited 5 months ago by Angelo S

    Is this exported as HTML5 or XPUB? In the first case, take a look at this: https://docs.pubcoder.com/pubcoder-html5.html#notes-on-video-and-audio-autoplay

  5. 2 months ago

    Patrick J I am attempting to have a user input their name and the name then prints in other places in the book. I was able to get this to work using Sigil and HTML/JS but I can't seem to get PubCoder to like what I'm doing. I'm assuming I'm inputting the code incorrectly and perhaps in the wrong places (smart objects vs page/project code). Any guidance would be very much appreciated. I am a university student with limited knowledge of HTML/JS but my capstone project is unfortunately centered around it. Here are the basics of what I had in Sigil:

    HTML:

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    <head>
        <meta charset="UTF-8"/>
        <title>BE SMART with YOUR HEART</title>
        <link rel="stylesheet" href="../Styles/styles.css" type="text/css"/>
        <script defer="" src="../Scripts/script.js"></script>
    </head>
    <body>
        <div class="header">
            Enter your name: <input type="text" id="nameInput"/>
        </div>
        <div class="content">
            <h1>BE SMART with YOUR HEART</h1>
            <p>My name is Benjamin. Everybody calls me Ben. You can call me Ben too because you are my new friend, <span class="namePlaceholder"></span>. I play on the Dizzy Dingers baseball team. It is a nice day outside for our big ball game. There are a lot of people here today. It is like the whole town is here to watch us play.</p>
            <p>Kendra is always on the move. She likes to swim and run track. Some kids can do that but others will have to be careful. It is important to know that it is okay to be careful because all kids are special, <span class="namePlaceholder"></span>.</p>
        </div>
    </body>
    </html>

    JS:
    document.addEventListener('DOMContentLoaded', function() { const nameInput = document.getElementById('nameInput'); const namePlaceholders = document.querySelectorAll('.namePlaceholder'); if (nameInput) { nameInput.addEventListener('input', function() { const name = nameInput.value; namePlaceholders.forEach(placeholder => { placeholder.textContent = name; }); }); } });

    Is there any Pubcoder example projects with this working. I managed to get the smart object code showing correctly based on the above post, but sadly, I do not see the input text populating the paragraph in the placeholders. The input field just saves previous names. ANy help would be greatly appreciate as I am trying to accomplish some thing similar as Original Poster. Thanks!

 

or Sign Up to reply!