How to use functions in Javascript to bulid an interactive text?

I'm trying to build an interactive text with Javascript. I can do it by using a new function each element I create, but if I do that I'll have too many functions.

Could somebody tell me what is wrong with the following code and what I should do so it works? Thanks in advance.

<!DOCTYPE html>

<html lang="en">
    <head>
    </head>
    <body>
        <div>
        <p>Name:</p>
        <button id="peter" onclick="includeName1(peter)">Peter</button>
        <button id="paul" onclick="includeName1(paul)">Paul</button>
        <p>Wife's name</p>
        <button id="mary" onclick="includeName2(mary)">Mary</button>
        <button id="emma" onclick="includeName2(emma)">Emma</button>
        <p>How long have you been married?</p>
        <input id="years" type="number" oninput="includeTime()">
        </div>
        <br/>
    
        <div>
        <p>My name is&nbsp;<span id="name1"></span>.&nbsp;I'm married to&nbsp;<span id="name2"></span>. We've been married for&nbsp;<span id="time"></span>&nbsp;years.
        </p>
        </div>   
                
        <script>
            function includeName1(manName){
                if (manName == "peter") {
                    document.getElementById("name1").innerHTML = "Peter";}
                else if (manName == "paul") {
                    document.getElementById("name1").innerHTML = "Paul";
                }
                }
            
            
            function includeName2(womanName){
                if (womanName == "mary") {
                    document.getElementById("name2").innerHTML = "Mary";}
                else if (womanName == "emma") {
                    document.getElementById("name2").innerHTML = "Emma";
                }
                }
             
            
            function includeTime(){
                var x = document.getElementById("years").innerHTML;
                document.getElementById("time").innerHTML = x;
            }
        </script>
    </body>
</html>

2 answers

  • answered 2020-06-02 00:22 Josh Ray

    You need to wrap the names in apostrophes, at the moment you're trying to pass an object called 'peter' to the function. On the input, you need to use value instead of innerHtml.

    <!DOCTYPE html>
    
    <html lang="en">
        <head>
        </head>
        <body>
            <div>
            <p>Name:</p>
            <button id="peter" onclick="includeName1('peter')">Peter</button>
            <button id="paul" onclick="includeName1('paul')">Paul</button>
            <p>Wife's name</p>
            <button id="mary" onclick="includeName2('mary')">Mary</button>
            <button id="emma" onclick="includeName2('emma')">Emma</button>
            <p>How long have you been married?</p>
            <input id="years" type="number" oninput="includeTime()">
            </div>
            <br/>
        
            <div>
            <p>My name is&nbsp;<span id="name1"></span>.&nbsp;I'm married to&nbsp;<span id="name2"></span>. We've been married for&nbsp;<span id="time"></span>&nbsp;years.
            </p>
            </div>   
                    
            <script>
                function includeName1(manName){
                    if (manName == "peter") {
                        document.getElementById("name1").innerHTML = "Peter";}
                    else if (manName == "paul") {
                        document.getElementById("name1").innerHTML = "Paul";
                    }
                    }
                
                
                function includeName2(womanName){
                    if (womanName == "mary") {
                        document.getElementById("name2").innerHTML = "Mary";}
                    else if (womanName == "emma") {
                        document.getElementById("name2").innerHTML = "Emma";
                    }
                    }
                 
                
                function includeTime(){
                    var x = document.getElementById("years").value;
                    document.getElementById("time").innerHTML = x;
                }
            </script>
        </body>
    </html>

  • answered 2020-06-02 01:12 Mister Jojo

    For the record... this code should be more readable on this way:

    const inTexts = document.getElementById('interractiv-texts')
      ,   outText = document.getElementById('Out-Text')
      ,   tVals   = {  man: '', wife: '', years: '' }
      ;
    const setText = e =>
      {
      if (!e.target.matches('[data-part]')) return
      tVals[e.target.dataset.part] = e.target.value
      outText.textContent = `My name is ${tVals.man}, I'm married to ${tVals.wife}. We've been married for ${tVals.years} years.`
      }
    inTexts.oninput = setText
    inTexts.onclick = setText
    <div id="interractiv-texts">
      <p>Name:</p>
      <select data-part="man">
        <option value="Peter">Peter</option>
        <option value="Paul">Paul</option>
        <option value="John">John</option>
      </select>
     
      <p>Wife's name</p>
      <button value="Mary" data-part="wife">Mary</button>
      <button value="Emma" data-part="wife">Emma</button>
      <p>How long have you been married?</p>
      <input data-part="years" type="number" >
    </div>
    
      <p id="Out-Text"></p>