Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Cheri Castro
Cheri Castro
226 Points

Having trouble getting some JavaScript to work, for a Modal and also for a form, to display the results.

I have a form that I am trying to use JavaScript to display the results. I have input the code but nothing happens when I click the submit button. Also, the modal that I input won't close and it seems to be opening without having to click the button. Please, help! It's been a while since I've been on here. So, I've forgotten how to submit my code with this. Plus, the last time, I was working with Python, not HTML5, CSS3 and JavaScript. I'm going to try though.

<p id="form_results"></p>                       
                            <form action="/action_page.php">
                            Please, select from the following list, what type of services are you interested in?:<br>
                            <select id="services" name="services" required="required">
                            <option value="Business Cleanings">Business Cleanings</option>
                            <option value="Special Occasion Cleanings">Special Occasion Cleanings</option>
                            <option value="Routine Activities Cleanings">Routine Activities Cleanings</option>
                            <option value="Deep Cleanings">Deep Cleanings</option>
                            </select><br><br>
                            <input type="checkbox" name="Buying?" value="Buying?"> Are you buying your home?<br>
                            <input type="checkbox" name="Or Renting?" value=" Or Renting?"> Or are you renting your home?<br><br>
                            Is your home a house, apartment, or other?<br>
                            <input type="radio" name="home" value="house">house<br>
                            <input type="radio" name="home" value="apartment">apartment<br>
                            <input type="radio" name="home" value="other">other<br><br>
                            Please, enter your first name:<br>
                            <input id="textarea" type="text" name="First Name" required="required"><br>
                            Please, enter your last name:<br>
                            <input id="textarea2" type="text" name="Last Name" required><br>
                            Please, enter your email address:<br>
                            <input id="textarea3" type="text" name=" Email Address"><br>
                            Please enter your telephone/cell phone number:<br>
                            <input id="textarea4" type="text" name="Telephone/cell phone"><br>
                            Please, enter your house number and street name:
                            <input id="textarea5" type="text" name="House number and street name" required><br>
                            Please enter the name of the city you live in:<br>
                            <input id="textarea6" type="text" name="city" required><br>
                            Please, enter the name of the state that you live in:
                            <input id="textarea7" type="text" name="state" required><br>
                            Please, enter your zip code:
                            <input id="textarea8" type="Zip code" name="Zip code" required><br><br>
                            Please, select from the following list, what is your preferred method to be contacted?:<br>
                            <select id="contact" name="Contact" required>
                            <option value="Phone call/voicemail">Phone call/voicemail</option>
                            <option value="Text">Text message</option>
                            <option value="Email">Email</option>
                            <option value="Letter">Letter</option>
                            </select><br><br>
                            If you need to correct any of the information that you've entered, please select the reset button.<br>
                            <input type="reset"><br>
                            If you have completed the form and are satisfied with your answers, please, select submit.<br>
                            <input type="submit" value="Submit" onclick="form_results();"/>
                            </form>

<script>

    function form_results(){
        var form_results = document.getElementById('form_results');
        var services = document.getElementById('services');
        var checkbox = document.getElementByType('checkbox');
        var radio = document.getElementByType('radio');
        var textarea = document.getElementById('textarea'};
        var textarea = document.getElementById('textarea2'};
        var textarea = document.getElementById('textarea3'};
        var textarea = document.getElementById('textarea4'};
        var textarea = document.getElementById('textarea5'};
        var textarea = document.getElementById('textarea6'};
        var textarea = document.getElementById('textarea7'};
        var textarea = document.getElementById('textarea8'};
        var contact = document.getElementById('contact');

        form_results.innerHTML = "form_results" + services.value + checkbox.value + radio.value + textarea.First Name + textarea2.Last Name + textarea3.Email Address +textarea4.Telephone/cell phone + textarea5.House number and street name + textarea6.city + textarea7.state +textarea8.Zip code + contact.value;
        }

</script><!--This isn't working but I'm not sure why.-->

<button id="modalBtn" class="button">Please, click me for an important message!</button>

        <div id="simpleModal" class="modal">
          <div class="modal-content">
            <span class="closeBtn">&times;</span>
            <p>Please, make sure you've filed out the form in order to get a response for services.</p>
          </div>
        </div>

<script>
    function getModalElement(){
        var modal = document.getElementById('simpleModal');
        var modalBtn = getElementById('modalBtn');
        var closeBtn = getElementByClassName('closeBtn')[0];

        modalBtn.addEventListner('click', openModal);
        closeBtn.addEventListener('click', closeModal);
        window.addEventListener('click', outsideClick);

        function openModal(){
          modal.style.display = 'block';
          }

        function closeModal(){
          modal.style.display = 'none';
          }
    }
</script>
Cheri Castro
Cheri Castro
226 Points

Yep, the code didn't post right. If you choose to assist, please also assist with the correct way to post the code, sorry.

Cheri Castro
Cheri Castro
226 Points

Ok, I tried to fix it by placing '''html at the start of the html portions and then ''' at the end of the html portions, as well as the JavaScript portions but that doesn't seemed to fix the code posting issue.

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

Those three marks need to be backticks (accents) instead of apostrophes.

Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:
Or watch this video on code formatting.

If you're using workspaces, an even better way to share the code is to make a snapshot of your workspace and post the link to it here.

Cheri Castro
Cheri Castro
226 Points

Ok, got the back ticks in there and sure enough it fixed the code to display properly. Now, I'll take a look at your other comments, thank you Steve.

Cheri Castro
Cheri Castro
226 Points

Ok, I changed the variable to this...

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

but still the results for the form aren't displaying. It seems I had an issue with JavaScript before, where if I had more than one section of JavaScript on any given HTML page, then one of them would stop working. Maybe that is the issue but, I don't know.

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

It looks much better. I've updated my answer.

2 Answers

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

Just at first glance I notice that the same name ("form_results") appears to be used for both a function name and a variable that references an element on the page. This is likely to be of the issues.

Here's a few other issues:

  • in "form_results", the variable "textarea" is declared 8 times (variables should only be declared once)
  • those same declarations have assignments with mismatched parentheses (brace instead of parenthesis)
  • the concatenated string attempts to access non-existent element properties (like "textarea.First")
  • several property names have embedded spaces (like "textarea.First Name")
  • the function "getModalElement" is defined but never called
  • in "getModalElement" selector methods are called without an object (like "document.")
  • "getElementByClassName" should be "getElementsByClassName" (with an "s")
  • "addEventListner" should be "addEventListener" (with another "e")
  • "outsideClick" is referenced but not defined
Cheri Castro
Cheri Castro
226 Points

Ok, I didn't realize that I had put brackets instead of parenthesis, they were supposed to be parenthesis. I'll fix that.

The reason that textarea is referenced 8 times is because in the form there are 8 text boxes that are supposed to be filled out. In the form, I just had them in the code as textarea but when I was trying to display the results I thought the request might get confused being as they're all textarea. So, I changed them to each have a different number associated with them. I thought that would work. If I can only put one textarea, then is it just supposed to know to display all of the different textareas? So, I shouldn't have numbered them to differentiate them? The reason that I put the spaces in the textareas, is because that's how it's wrote in the forms code, so I thought it needed to be exactly like that, in order to know what information to access.

Ok, so the getModalElement selector method shouldn't have document in it? Should it have anything? Or maybe the better question, what should it have?

getElementByClassName...just add an s, ok

I think I had found the missing e but that's about all I found on my own.

Yes the "outsideClick" I stopped there because I was trying to fix the other stuff. I'll make some corrections and see what results that brings.

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

You can have separate "textarea" variables if you give them numbers ("textarea2", "textarea3", etc).

What I mean about the selector is that instead of just "getElementById" you need "document.getElementById".

And in that big string, you probably just want the "value" property instead of all those different names.

Cheri Castro
Cheri Castro
226 Points

Oh, ok I see what you were talking about, about the selector methods are called without an object (like "document"). I didn't realize I had done that either. I fixed it, and added the s but still no change.

<script>
    function getModalElement(){
        var modal = getElementById('simpleModal');
        var modalBtn = getElementById('modalBtn');
        var closeBtn = getElementsByClassName('closeBtn')[0];

        modalBtn.addEventListener('click', openModal);
        closeBtn.addEventListener('click', closeModal);
        window.addEventListener('click', outsideClick);

        function openModal(){
          modal.style.display = 'block';
          }

        function closeModal(){
          modal.style.display = 'none';
          }
    }
</script>

I also fixed the other area, I removed the brackets and replaced them with parenthesis and I took the numbered textareas and removed all of the numbering. I removed the spaces as well. The results haven't changed with that one either.

<script>

    function form_results(){
        var display_results = document.getElementById('display_results');
        var services = document.getElementById('services');
        var checkbox = document.getElementByType('checkbox');
        var radio = document.getElementByType('radio');
        var textarea = document.getElementById('textarea');
        var textarea = document.getElementById('textarea');
        var textarea = document.getElementById('textarea');
        var textarea = document.getElementById('textarea');
        var textarea = document.getElementById('textarea');
        var textarea = document.getElementById('textarea');
        var textarea = document.getElementById('textarea');
        var textarea = document.getElementById('textarea');
        var contact = document.getElementById('contact');

        form_results.innerHTML = "form_results" + services.value + checkbox.value + radio.value + textarea.FirstName + textarea.LastName + textarea.EmailAddress + textarea.Telephone/cellphone + textarea.Housenumberandstreetname + textarea.city + textarea.state + textarea.Zipcode + contact.value;
        }

</script><!--This isn't working but I'm not sure why.-->
Cheri Castro
Cheri Castro
226 Points

If a value isn't called for in the form, in that long string, would it still know to display a value?

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

You still haven't addressed most of the issues. In particular:

  • "textarea" is declared 8 times
  • the concatenated string attempts to access non-existent element properties (like "textarea.FirstName")
  • you probably just want the "value" property instead of all those different names
  • the function "getModalElement" is defined but never called
  • the selector methods are called without an object (like "document.")
  • "outsideClick" is referenced but not defined
Cheri Castro
Cheri Castro
226 Points
Cheri Castro
Cheri Castro
226 Points

Ok, I guess I don't understand. If I want the different textarea results to display but I can't declare it for each different textarea and I shouldn't put numbers by them to differentiate them, then I don't know how to get them to display. I had removed the spaces between the words in the long string, I thought that's what you were saying might help. But you also said that I should have the values instead but in the form, a value isn't listed. So, if I asked for the values of the textareas to be displayed but there are no values then, I'm not sure what to do, to fix that either. The reason that getModalElement is defined but not called is that the video I watched placed the JavaScript on a separate page but I've never done that and am not sure how to do that. I've only worked with putting CSS3 on a separate style sheet. So, when I've worked with JavaScript before on the HTML page, I usually have to give it a function but I wasn't sure what to name this function for getting the modal. So, inexperience has led me to my current place of not knowing what to do to fix these issues.

Cheri Castro
Cheri Castro
226 Points

No change still. I'm not sure what else to change. 

<script>

    function form_results(){
        var display_results = document.getElementById('display_results');
        var services = document.getElementById('services');
        var checkbox = document.getElementByType('checkbox');
        var radio = document.getElementByType('radio');
        var textarea = document.getElementsById('textarea');
        var contact = document.getElementById('contact');

        form_results.innerHTML = "form_results" + services.value + checkbox.value + radio.value + textarea1.value + textarea2.value + textarea3.value + textarea4.value + textarea5.value + textarea6.value + textarea7.value + textarea8.value + contact.value;
        }

</script>
Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

I was saying that you can use numbers to make variables different (they were all the same before):

function form_results() {
  var display_results = document.getElementById("form_results");
  var services = document.getElementById("services");
  // var checkbox = document.getElementByType('checkbox');  <-- bad function
  // var radio = document.getElementByType('radio');        <-- bad function
  var textarea1 = document.getElementById("textarea");
  var textarea2 = document.getElementById("textarea2");  // <-- each variable different
  var textarea3 = document.getElementById("textarea3");
  var textarea4 = document.getElementById("textarea4");
  var textarea5 = document.getElementById("textarea5");
  var textarea6 = document.getElementById("textarea6");
  var textarea7 = document.getElementById("textarea7");
  var textarea8 = document.getElementById("textarea8");
  var contact = document.getElementById("contact");

  display_results.innerHTML = "form_results" + services.value +
    // checkbox.value + radio.value +                       <-- undefined
    textarea1.value + textarea2.value + textarea3.value +
    textarea4.value + textarea5.value + textarea6.value +
    textarea7.value + textarea8.value + contact.value;
}

The Where Does JavaScript Go? video in the JavaScript Basics course teaches about loading code from an external file.

Cheri Castro
Cheri Castro
226 Points

Ok, so I think I fixed the things that you suggested. You placed double quotations on the variables in the parenthesis but I had, had single quotations on everything in parenthesis before. Do they all need double quotations? Because the two that you have marked as undefined only have single quotations in your most recent response, and those are the only two that you marked as being undefined. Perhaps it's something else that I'm still not seeing. I watched the video. I guess that means that I need to include an alert box to display the results? I thought just by using the display_results.innerHTML, that alone would display the results of the form, within the web page. Maybe not.

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

The type of quotes is not imporant. As standard practice I generally use double quotes, but the lines I did not modify still have the original single quotes. Either style will work.