HTML & Javascript - Button not working

Question

I'm trying to finish my final project for my introductory web development course (I'm very new to javascript and html), which is a simple Mad Libs project. I've been running into problems all day with trying to get it to work, and I think I've largely eradicated most of the bugs. I've really hit a roadblock though, with the button I'm using that is supposed to load in the results and call the function that builds the story using an event listener in the javascript file. When I run my program, the button doesn't do a thing. I checked the Google Chrome developer console, and I'm not getting any error messages or anything, so I have no clue what I'm doing wrong.

Here's my javascript file (named mad_libs_1.js):

var story = document.querySelector("#story");
var adjective1 = document.querySelector("#adjective1");
var verbEndingInED = document.querySelector("#verbEndingInED");
var nounPlural1 = document.querySelector("#nounPlural1");
var liquid = document.querySelector("#liquid");
var nounPlural2 = document.querySelector("#nounPlural2");
var famousPerson = document.querySelector("#famousPerson");
var place = document.querySelector("#place");
var occupation = document.querySelector("#occupation");
var noun1 = document.querySelector("#noun1");
var nationality = document.querySelector("#nationality");
var femaleCelebrity = document.querySelector("#femaleCelebrity");
var noun2 = document.querySelector("#noun2");
var femaleFriend = document.querySelector("#femaleFriend");
var nounPlural3 = document.querySelector("#nounPlural3");
var number = document.querySelector("#number");
var adjective2 = document.querySelector("#adjective2");

//event listener for the button
var finished = document.querySelector("#finished");
if(finished){
    finished.addEventListener("click", createStory, false);
}


function createStory(){
    console.log("createStory HAS BEEN CALLED");
    var finalStory = ""; 
    finalStory += "I enjoy long, " + adjective1.bold();
    finalStory += " walks on the beach, getting " + verbEndingInED.bold();
    finalStory += " in the rain and serendipitous encounters with " + nounPlural1.bold();
    finalStory += ". I really like piña coladas mixed with " + liquid.bold();
    finalStory += ", and romantic, candle-lit " + nounPlural2.bold();
    finalStory += ". I am well-read from Dr. Seuss to " + famousPerson.bold();
    finalStory += ". I travel frequently, especially to " + place.bold();
    finalStory += ", when I am not busy with work. (I am a " + occupation.bold();
    finalStory += ".) I am looking for " + noun.bold();
    finalStory += " and beauty in the form of a " + nationality.bold();
    finalStory += " goddess. She should have the physique of " + femaleCelebrity.bold();
    finalStory += " and the " + noun2.bold();
    finalStory += " of " + femaleFriend.bold();
    finalStory += ". I would prefer if she knew how to cook, clean, and wash my " + nounPlural3.bold();
    finalStory += ". I know I’m not very attractive in my picture, but it was taken " + number.bold();
    finalStory += " days ago, and I have since become more " + adjective2.bold() + ".";
    story.innerHTML = finalStory;
    console.log(story + " IS THE STORY");
}

and here's my html:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mad Libs 1</title>
        <script type="text/javascript" src="mad_libs_1.js"></script>
    </head>
    <body lang="en-US">
        <div class="container-fluid">
            <h1>Mad Libs 1</h1>
        </div>
        <div class="container-fluid">
            <ul>
                <li>Adjective: <input type="text" name="adjective1" id="adjective1"><br>
                <li>Verb Ending in "ED": <input type="text" name="verbEndingInED" id="verbEndingInED"><br>
                <li>Noun (Plural): <input type="text" name="nounPlural1" id="nounPlural1"><br>
                <li>Liquid: <input type="text" name="liquid" id="liquid"><br>
                <li>Noun (Plural): <input type="text" name="nounPlural" id="nounPlural2"><br>
                <li>Famous Person: <input type="text" name="famousPerson" id="famousPerson"><br>
                <li>Place: <input type="text" name="place" id="place"><br>
                <li>Occupation: <input type="text" name="occupation" id="occupation"><br>
                <li>Noun: <input type="text" name="noun1" id="noun1"><br>
                <li>Nationality: <input type="text" name="nationaltiy" id="nationality"><br>
                <li>Female Celebrity: <input type="text" name="femaleCelebrity" id="femaleCelebrity"><br>
                <li>Noun: <input type="text" name="noun2" id="noun2"><br>
                <li>Female Friend: <input type="text" name="femaleFriend" id="femaleFriend"><br>
                <li>Noun (Plural): <input type="text" name="nounPlural3" id="nounPlural3"><br>
                <li>Number: <input type="text" name="number" id="number"><br>
                <li>Adjective: <input type="text" name="adjective2" id="adjective2"><br>
                <button id="finished">I'M FINISHED!</button>
            </ul>
        </div>
        <div id="story"></div>      
    </body>
</html>

I know that my code practices are probably sloppy--I'm just trying to get it to work before I polish it up. Also, I have to use regular javascript and no jquery. I appreciate any help I get with this because I've been working in vain for hours and hours trying to figure out what's wrong.

For the record, I also tried using Firefox and it didn't work any better there. — Matt Mc, Dec 13 '16 at 04:34
see where you say `if (finished)` ... add an else, and you may see that `finished` hasn't been found - it all depends on where the code block is in relation to the html element ... if you run the code too soon, it wont find the button - which is the case here, because you load the code in the head, the body hasn't even started to load - you could add the `defer` attribute to your script tag — Jaromanda X, Dec 13 '16 at 04:36
That worked!!! I would have never guessed that that was the problem. Thank you so much! You saved me from more hours of frustration! — Matt Mc, Dec 13 '16 at 04:44

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

Further to @Jaromanda X's suggestion, try wrapping your code in a function, and then assigning that function as the window.onload event handler.

This way your code won't run until the HTML document has been loaded. Otherwise your code might run before the document has loaded and there won't be any HTML elements to operate on.

function runOnLoad() {
    // all your code in here
}

// assign your function as the handler for the onload event
window.onload = runOnLoad;

You might be interested to read this question for a bit more information about how to run code after the page has loaded, and a few different ways to do it.

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

edited May 23 '17 at 12:08

Community

1
1

answered Dec 13 '16 at 04:44

Matt

3,677
1
14
24

yes, this is the better way to do it than relying on `defer` attribute on script! – Jaromanda X Dec 13 '16 at 04:49
Thanks for the tip! These are all things that I wish they had mentioned in class. – Matt Mc Dec 13 '16 at 04:51
JavaScript web development is fraught with perils such as these, it gets easier as you do more of it :) – Matt Dec 13 '16 at 05:01

score 0 · Answer 2 · answered Dec 13 '16 at 04:41

0

You have errors in your code. bold() is not a function if you want to use bold text you can use <strong> tag.

Also if you want to get value from textbox you need to use value property.

function createStory() {
   console.log("createStory HAS BEEN CALLED");
   var finalStory = "";
   finalStory += "I enjoy long, <strong>" + adjective1.value+ "</strong>";
   story.innerHTML = finalStory;
   console.log(story + " IS THE STORY");
}

I have corrected for the first textbox you can follow same for the rest.

answered Dec 13 '16 at 04:41

Mairaj Ahmad

14,434
2
26
40

Actually it should be `adjective1.innerHTML.bold()` which calls the `String.prototype.bold` method which is a deprecated method. – Sebastian Simon Dec 13 '16 at 04:45
Thanks, I the browser threw an error for that too so I fixed it. – Matt Mc Dec 13 '16 at 04:46
@Xufox `innerHTML` will not return `value` of `textbox` – Mairaj Ahmad Dec 13 '16 at 04:46
@Leopard Oh, then `.value`. – Sebastian Simon Dec 13 '16 at 04:52

score 0 · Answer 3 · answered Dec 13 '16 at 04:44

You could use the addEventListener:

var div = document.getElementById('div');
function blah(e) {

}
div.addEventListener('click', blah);u

This would make a click event in the javascript. The e parameter is needed for this though because it calls for the event.

HTML & Javascript - Button not working

3 Answers3