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 don bencilao
don bencilao
4,153 Points

simple quote form

hi,

I'm practicing with my javascript, and I want to make a simple quote form.

basically the user will :

choose from the drop down selection > input an area in the the text box > press button > output display in the result text box.

but nothing is show and the console shows and error "ReferenceError: Can't find variable: job"

    <div class="container">
        <p>Type in the requested values</p>
        <select id="terminate">
            <option>choose</option>
            <option value="termite">termite</option>
            <option value="rat">rat</option>
        </select>
        <input id="area" type="text" value="" placeholder="floor area/sq.m">
        <button id="calculate">button</button>
        <input id="quote" type="text" placeholder="total" value="">
    </div>
    <script type="text/javascript" src="quote.js"></script>
    ``` 

```javascript
        var button = document.getElementById("calculate");
    var quote = document.getElementById("quote");


    var terminate = document.getElementById("terminate");
    terminate.addEventListener('change', function(){
          var termite = {
            name: "termite",
            price: "150",
            total: function (){
            var area = document.getElementById("area").value;
            var total = area * termite.price;
            console.log(total);
            quote.setAttribute('value',total);

            }
        };
            var rat = {
            name: "rat",
            price: "550",
            total: function (){
            var area = document.getElementById("area").value;
            var total = area * rat.price;
            console.log(total);
            quote.setAttribute('value',total);          
            }
        };
          console.log(this.value);
          button.addEventListener ('click', this.total);
    });     

    ```

2 Answers

Patryk Nowak
Patryk Nowak
14,103 Points

Hi Don, this is my idea to resolve your problem :)

http://codepen.io/anon/pen/KwJEj

don bencilao
don bencilao
4,153 Points

cool, I'm still getting the hang of javascript.

do you have any advice for me?

like what else can I build?

so I can practice.

thank you.

don bencilao
don bencilao
4,153 Points

oh and btw your code has an error

"TypeError: 'undefined' is not an object (evaluating 'pest[id].price')"

don bencilao
don bencilao
4,153 Points

I added a conditional haha

function calc(){
      var area = document.getElementById("area"),
          total = document.getElementById("quote"),
          id = terminate.value;
      if(id == " "){      
        alert("choose a pest");
      }
      else{
        total.value = pest[id].price * area.value;
      }
    }
Patryk Nowak
Patryk Nowak
14,103 Points
Patryk Nowak
Patryk Nowak
14,103 Points

Hi Don, I knew that, better equal to undefined, so

if(id === "undefined")

it's much safier :). Hmmm... I can advice you, to learn about OOP Javascript, Javascript patterns. Maybe some code challenges from here:http://coderbyte.com/CodingArea/Challenges/ Next learn about canvas and how to make a game with pure Javascript (without any framework).