program on Javascript doesn't work correctly

Question

I've a problem with result of this program: when I checked "Protector", "Headset", "Case" and "Games" as a result I should receive "Kindle", "Nokia" and "Wii". However, I receive only one value - "Kindle" (this is in Google Chrome and Internet Explorer). In addition, I receive all the values (duplicated also) this is in Opera. Can you help me to resolve these problems. Thanks in advance.

<html>
<head>
<script type="text/javascript">

function product(){ 
    var checkboxes = document.getElementsByName('checkboxes');
    var i=0;
    var j=0;
    var tech = [
    ["Kindle","Protector"],
    ["Iphone","Headset"],
    ["Iphone","US Charger"],
    ["Iphone","USB cable"],
    ["Iphone","Case"],
    ["Nokia","Protector"],
    ["Nokia","Headset"],
    ["Nokia","Case"],
    ["Wii","Games"]
    ];

    for (i=0 ; i < tech.length; i++){
        for(j=0 ; j< checkboxes.length; j++){
            if ((tech[i][1] == checkboxes[j].value)&&(checkboxes[j].checked)){
            document.write(tech[i][0]);
            document.write("<br>");
            }
        }
    }
}
</script>
</head>

<body>

<form name="Accessories">
<input type="checkbox" name="checkboxes" value="Protector"> Protector <br>
<input type="checkbox" name="checkboxes" value="Headset"> Headset <br>
<input type="checkbox" name="checkboxes" value="US Charger"> US Charger <br>
<input type="checkbox" name="checkboxes" value="USB cable"> USB cable <br>
<input type="checkbox" name="checkboxes" value="Case"> Case <br>
<input type="checkbox" name="checkboxes" value="Games"> Games </br>
<input type="button" name="Check" onClick="product()" value="Search a product">
</form>

</body>
</html>

Pointy · Accepted Answer · 2013-06-02 16:53:03Z

3

Calling document.write() after the page has rendered will obliterate the page completely. In some browsers, that means that the JavaScript code itself will stop working.

What you can try instead is this:

Add a <div> to the end of your page (inside the <body> of course) and give it an "id" value of "settings".

Change your code to set its contents:

var content = "";
for (i=0 ; i < tech.length; i++){
    for(j=0 ; j< checkboxes.length; j++){
        if ((tech[i][1] == checkboxes[j].value)&&(checkboxes[j].checked)){
          content += tech[i][0] + '<br>';
        }
    }
}
document.getElementById("settings").innerHTML = content;

answered Jun 2, 2013 at 16:53

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

4 Comments

Kristiana Over a year ago

This is working, but the second problem is staying. When I check something the result should return unique values that all parameters are checked. For example: when I checked "Protector" the result should be only "Kindle", not "Kindle" and "Nokia" because for "Nokia" other parameters are not checked. Thanks for helping me

Pointy Over a year ago

@user2432205 nothing in your code makes any attempt to ensure that kind of behavior, though I'm not sure I know what you mean. Because you're using checkboxes and not radio buttons, it's possible for more than one to be checked at the same time.

Kristiana Over a year ago

I can't do it with radio buttons, as I should choose between more options. I will change the parameters to be more clear. ["Boiled eggs","Eggs"], ["BLT Sandwich","Bacon"], ["BLT Sandwich","Lettuce"], ["BLT Sandwich","Tomato"], ["BLT Sandwich","Bread"], ["American Breakfast","Eggs"], ["American Breakfast","Bacon"], ["American Breakfast","Bread"], ["French Fries","Potatoes"]

Kristiana Over a year ago

If check only "Eggs" i will have product only for a "Boiled Eggs", not for "American Breakfast", because in "American Breakfast" I have "Bacon" and "Bread", too. Second example if i check "eggs" and "bacon" the result will be the same (Boiled Eggs), because I don't have a Bread (unchecked). I hope you will understand me in this way.

Anupam · Accepted Answer · 2013-06-02 17:17:14Z

1

The moment you use document.write() your form elements exist no more so your checkboxes array will not be present. That is the reason why you are getting just 'kindle'. Try to use console.log(tech[i][0]) instead and run it in chrome. You should get: Kindle, Iphone, Iphone, Nokia, Nokia, Nokia, Wii.

answered Jun 2, 2013 at 17:17

Anupam

261 bronze badge

Collectives™ on Stack Overflow

program on Javascript doesn't work correctly

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related