Need helping with innerHTML and array input variables

Question

I need this to take user input. Take the value and subtract one so that one of the 5 arrays can be called and printed. If 5 is chosen, all 5 arrays are printed; if 3 is chosen arrays 0 through 2 are printed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test2</title>
</head>
<body>
<input type="button" onclick="dutyarray()" value="Click">To see my top<input type="number"     id="counter"> job duties here</input>
<br />
<p id="task">Duties</p>
<script>
function dutyarray()
{
    var x = document.getElementById('counter').value;
    x = parseInt(x);

    var duty= new Array();
    duty[0] = "Operate Equipment";
    duty[1] = "Check for Water Damage";
    duty[2] = "Check for Mold";
    duty[3] = "Follow Insurance Procedure";
    duty[4] = "Restore";        

    while(x >= 0; x - 1)
    {
        document.getElementById('task').innerHTML = duty[x] + <br>;
    }
}
</script>

Bounds-checking... Make sure x is greater than 0 before doing that loop! Oh, and use x--... — abiessu
– abiessu, Commented Nov 1, 2013 at 1:56
while(x >= 0; x - 1) is not something while can do. Please look up “JavaScript array literals”. <br> probably needs to be in a string. To append, you could use +=, but the DOM is a much better solution. — Ry-
– Ry- ♦, Commented Nov 1, 2013 at 1:58
You have so many errors...1. Do write ONLY the minimum code in your example. 2. input tag does not have an innerHTML attr, it is an open tag. 3. Read other comments. — Itay Moav -Malimovka
– Itay Moav -Malimovka, Commented Nov 1, 2013 at 2:00

Oriol · Accepted Answer · 2013-11-01 02:25:47Z

You could use

var duty = [
        "Operate Equipment",
        "Check for Water Damage",
        "Check for Mold",
        "Follow Insurance Procedure",
        "Restore"
    ],  
    x = parseInt( document.getElementById('counter').value, 10 );
document.getElementById('task').innerHTML = duty.slice(0, x).join('<br />');

Notes

Always use the second argument (radix) when using parseInt or parseFloat.
If document.getElementById('counter').value is a numerical string (like '3'), don't use parseInt. Instead, if necessary, use +'3' to get the number 3.

Only use parseInt if you want to parse something like '3px' into 3.

Don't use getElementById to get the same element at each iteration of a loop.

Then, instead of

for(var i = 0; i < n; ++i) {
   doSomething(document.getElementById('foo'), i);
}

use

var el = document.getElementById('foo');
for(var i = 0; i < n; ++i) {
   doSomething(el, i);
}

Never change innerHTML at each iteration of a loop, because modifying the DOM has bad performance.

Then, instead of

for(var i = 0; i < n; ++i) {
   element.innerHTML += someHTML(i); // n DOM modifications
}

use

var html = '';
for(var i = 0; i < n; ++i) {
   html += someHTML(i);
}
element.innerHTML = html; // only 1 DOM modification

Tony · Accepted Answer · 2013-11-01 02:09:42Z

0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test2</title>
</head>
<body>
    <input type="button" onclick="dutyarray()" value="Click">To see my top
    <input type="number" id="counter"> job duties here</input>
    <br />
    <p id="task">Duties</p>
    <script>
        function dutyarray() {
            var x = document.getElementById('counter').value;
            x = parseInt(x);

            var duty =
                [
                "Operate Equipment",
                "Check for Water Damage",
                "Check for Mold",
                "Follow Insurance Procedure",
                "Restore"
                ];

            if (x > duty.length-1) x = duty.length-1;   // Performs some checking

            document.getElementById('task').innerHTML = "";
            for ( ; x >= 0; x--) {
                document.getElementById('task').innerHTML += duty[x] + "<br>";
            }
        }
    </script>
</body>
</html>

edited Nov 1, 2013 at 2:09

answered Nov 1, 2013 at 2:03

Tony

17.9k17 gold badges85 silver badges147 bronze badges

1 Comment

Thps2 Over a year ago

A lot of good suggestions here getting closer to what i'm looking for please keep them coming.

Collectives™ on Stack Overflow

Need helping with innerHTML and array input variables

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related