How to make arrays work in javascript?

Question

I'm trying to decrease or increase the value in a textbox using javascript. I made it work, when not using any arrays on it. If you're asking why I need arrays on this one. Its because I'm gonna need to integrate it later on a bigger project which heavily needs array on it. I'm a beginner in javascript, so I don't really know what are the requirements in making this work when making use of arrays.

<html>
<head>
  <script type="text/javascript">
    function blabla(){
        var a= document.x.qty[].value;
        var b=document.x.qty2[].value;
        var pa=parseInt(a);
        var plusqty= pa + 1;
        var txt = plusqty;
        var tbox = document.getElementById('qty');
        if (tbox)
        {
            tbox.value = txt;
        }

    }

    function lastog(){
        var a= document.x.qty.value;
        var b=document.x.qty2.value;
        var pa=parseInt(a);
        var plusqty= pa - 1;
        var txt = plusqty;
        var tbox = document.getElementById('qty');
        if (tbox)
        {
            tbox.value = txt;
        }
    }
  </script>
</head>

<body>
  <form name="x">
    number 1<input type="text" id="qty" name="qty[]" value=""><br/>
    number 2<input type="text" id="qty2" name="qty2" value=""><br/>
    number 3<input type="text" id="qty3" name="qty3" value=""><br/>
    <a href=""><img src="add-icon.png" onmouseover="blabla();"></img></a>
    <a href=""><img src="delete-icon.png" onmouseover="lastog();"></img></a>
  </form>
</body>
</html>

I also tried iterating through it using the usual for loop, but I cant make it work:

function blabla(){
    for (int i=0; i<arr.length; i++){
        var a= document.x.qty[].value;
        var b=document.x.qty2[].value;
        var pa=parseInt(a);
        var plusqty= pa + 1;
        var txt = plusqty;
        var tbox = document.getElementById('qty');
        if (tbox)
        {
            tbox.value = txt;
        }
    }
}

Sorry, but it doesn't work that way at all... use document.getElementById('qty') instead of document.x.qty[], etc. for starters. — Chris Morgan
– Chris Morgan, Commented Nov 20, 2010 at 12:49
To label a form input, use the <label> element. <br/> isn't semantic; you should use CSS if you want each input on a separate line. Read "Fancy Form Design", "Label Placement & 1ayr vs. 2ary Actions", "Web App. Form Design" for more. — outis
– outis, Commented Nov 20, 2010 at 12:53

Nick Craver · Accepted Answer · 2010-11-20 12:48:39Z

4

You need to use bracket notation to access a property worth special characters in the name, like this:

var a = document.x["qty[]"].value;
var b = document.x["qty2[]"].value;

Though, if they have IDs, it's much easier to do:

var a = document.getElementById("qty").value;

Or for example looping through all with that name:

var qtyElements = document.getElementsByName("qty[]");
for(var i=0; i<qtyElements.length; i++) {
  alert(qtyElements[i].value);
}

answered Nov 20, 2010 at 12:48

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

2 Comments

Wern Ancheta Over a year ago

there isn't any need to include the index # if I used id?

Nick Craver Over a year ago

@Ieyasu - An id should only be used once in a document, a name can be used multiples times. No, there's no way to use an index because document.getElementById() returns a single element...because that id should be used only once.

Collectives™ on Stack Overflow

How to make arrays work in javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related