CODEWITHSUNDEEP
javascripthtmlfunction
user14410781
user14410781

Reputation:

Javascript function isn't responding

I have all the code the way that it is set up for my class example, but when I open in browser and click "Generate Story" button at bottom, it doesn't pull up anything. Additionally, for "outputDiv.innerHTML" my "innerHTML" has no color. Not sure what I did wrong.

<!DOCTYPE html>


<html>
<head>
    <title> Story Time</title>
    <script type="text/javascript">
        
        function GenerateStory() {
            
            outputDiv.innerHTML='Once upon a time there was a boy named' + NameBox.value + 'that lived in' + CityBox.value + 'with his' + numberbox.value + 'siblings.' + NameBox.value + 'had a dream of being a' + OccupationBox.value + 'so he could' + HobbyBox.value + 'whenever he wanted and move to' + CityBox2.value 'when he grew up.'

        }

    </script>
</head>

<body>
    <h1>Story Time</h1>

    <table style="margin-left: auto; margin-right: auto;">
        <tr><td>Name:</td>
            <td><input type="text" id="NameBox" value="" size="20"></td></tr>

        <tr><td>City:</td> 
            <td><input type="text" id="CityBox" value="" size="20"></td></tr>

        <tr><td>Number Between 2-100: </td> 
            <td><input type="text" id="NumberBox" value="" size="20"></td></tr>

        <tr><td>Occupation:</td> 
            <td><input type="text" id="OccupationBox" value="" size="20"></td> </tr>

        <tr><td>Hobby:</td> 
            <td><input type="text" id="HobbyBox" value="" size="20"></td></tr>

        <tr><td>Another City:</td> 
            <td><input type="text" id="CityBox2" value="" size="20"></td></tr>
    </table>
    <hr>

        <button onclick="GenerateStory();">Click for the Story</button>
    <hr>
        <div id="outputDiv">
        </div> 
    
</body>

</html>

Upvotes: 0

Views: 129

Answers (2)

vinay kennedy
vinay kennedy

Reputation: 19

Hi check i have structured your code. Check if this works. You haven't picked the elements from the document

<!DOCTYPE html>

<html>
  <head>
    <title>Story Time</title>
  </head>

  <body>
    <h1>Story Time</h1>

    <table style="margin-left: auto; margin-right: auto">
      <tr>
        <td>Name:</td>
        <td><input type="text" id="NameBox" value="" size="20" /></td>
      </tr>

      <tr>
        <td>City:</td>
        <td><input type="text" id="CityBox" value="" size="20" /></td>
      </tr>

      <tr>
        <td>Number Between 2-100:</td>
        <td><input type="text" id="NumberBox" value="" size="20" /></td>
      </tr>

      <tr>
        <td>Occupation:</td>
        <td><input type="text" id="OccupationBox" value="" size="20" /></td>
      </tr>

      <tr>
        <td>Hobby:</td>
        <td><input type="text" id="HobbyBox" value="" size="20" /></td>
      </tr>

      <tr>
        <td>Another City:</td>
        <td><input type="text" id="CityBox2" value="" size="20" /></td>
      </tr>
    </table>
    <hr />

    <button onclick="GenerateStory();">Click for the Story</button>
    <hr />
    <div id="outputDiv"></div>

    <script type="text/javascript">
      function GenerateStory() {
        let NameBox = document.getElementById("NameBox").value;
        let cityBox = document.getElementById("CityBox").value;
        let NumberBox = document.getElementById("NumberBox").value;
        let OccupationBox = document.getElementById("OccupationBox").value;
        let HobbyBox = document.getElementById("HobbyBox").value;
        let CityBox2 = document.getElementById("CityBox2").value;
        document.getElementById("outputDiv").innerHTML =
          "Once upon a time there was a boy named" +
          NameBox +
          "that lived in" +
          cityBox +
          "with his" +
          NumberBox +
          "siblings." +
          NameBox +
          "had a dream of being a" +
          OccupationBox +
          "so he could" +
          HobbyBox +
          "whenever he wanted and move to" +
          CityBox2 +
          "when he grew up.";
      }
    </script>
  </body>
</html>

Upvotes: 1

bozdoz
bozdoz

Reputation: 12860

Looks like you probably just need to get the element by its id:

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

var outputDiv = document.getElementById('outputDiv');

Upvotes: 1

Related Questions