Java script undefined variable, basic html form

Question

I've been struggling with this for around an hour now and rewrote it about three different times and I can't for the life of me figure out what the issue is, regardless of what is entered, everything besides for the name field will return a value, however the name will just return undefined. I've gone over this so many times, I've copy+pasted+modified the working ones, there's not a single typo that I can find... What is going on here?

Item Name: <input type="text" id="item_name" placeholder="Enter a price..."/> </br>
Item Price: <input type="text" id="item_price" placeholder="Enter a price..."/> </br>
Item Description: <input type="text" id="item_description" placeholder="Enter a description..."/> </br>
Item Image(link): <input type="text" id="item_image" placeholder="Enter a image link..."/> </br>
rsid: <input type="text" id="rs_item_id" placeholder="Enter a item id..."/> </br>
rsam: <input type="text" id="rs_item_amount" placeholder="Enter a item amount..."/> </br>
<button id="update">Update item</button>
<script>
    var name    = document.getElementById("item_name");
    var price   = document.getElementById("item_price");
    var desc    = document.getElementById("item_description");
    var img     = document.getElementById("item_image");
    var rsid    = document.getElementById("rs_item_id");
    var rsam    = document.getElementById("rs_item_amount");
    var button  = document.getElementById("update");
    button.addEventListener("click", function() {
        alert("Name = " + name.value + "\n" 
            + "Price = " + price.value + "\n" 
            + "Desc = " + desc.value + "\n" 
            + "Img = " + img.value + "\n" 
            + "rsid = " + rsid.value + "\n" 
            + "rsam = " + rsam.value + "\n");
    });
</script>

Gabriele Petrioli · Accepted Answer · 2014-12-20 13:36:24Z

1

The problem is that because you make them all global variables the name one clashes with the window.name property.

Either using a different variable name, or creating a closure will work

answered Dec 20, 2014 at 13:36

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleksandr T. · Accepted Answer · 2014-12-20 13:45:36Z

Put name, price, desc, img, rsid, rsam inside event handler.

var button  = document.getElementById("update");

button.addEventListener("click", function() {
  var name    = document.getElementById("item_name");
  var price   = document.getElementById("item_price");
  var desc    = document.getElementById("item_description");
  var img     = document.getElementById("item_image");
  var rsid    = document.getElementById("rs_item_id");
  var rsam    = document.getElementById("rs_item_amount");


    alert("Name = " + name.value + "\n" 
        + "Price = " + price.value + "\n" 
        + "Desc = " + desc.value + "\n" 
        + "Img = " + img.value + "\n" 
        + "rsid = " + rsid.value + "\n" 
        + "rsam = " + rsam.value + "\n");
});

Demo: http://jsbin.com/fivos/1/edit?html,output

Collectives™ on Stack Overflow

Java script undefined variable, basic html form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related