How to change value of an array element through javascript?

Question

I want to make a button that changes the value of an element in an array. I am trying to do it by the following code but the element does not change. As a self learning beginner, I am probably missing something very obvious and I would appreciate if someone can point that out to me.

Thank you for your answers!

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Change Array Value</title>

</head>

<body>
<textarea id="log2"></textarea>
<input type="button" onClick="uClicked();" value="Click!">
<script>
    var fer=[];

    for (i=0; i< 15; i++){
            fer[i]=i+1;
    }

    function uClicked(fer){
        fer[12] = 10; 
        return fer[12];
    }
    log2.value = "fer[12]= " + fer[12];

</script>
</body>
</html>

related: jqfundamentals.com/#example-2.46

jbabey
– jbabey

2012-05-21 17:58:27 +00:00
Commented May 21, 2012 at 17:58 — jbabey
– jbabey, Commented May 21, 2012 at 17:58

gdoron · Accepted Answer · 2012-05-21 17:48:28Z

6

function uClicked(){ // remove the parameter.

The parameter isn't needed, and is hiding the real fer variable.

Because fer was declared in outer scope, uClicked function can access it.

Fixed code:

var fer=[];

for (i=0; i< 15; i++){
        fer[i]=i+1;
}

function uClicked(){
    fer[12] = 10; 
    alert(fer[12]);
}

answered May 21, 2012 at 17:48

gdoron

151k59 gold badges302 silver badges375 bronze badges

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

1 Comment

glin yon Over a year ago

Thank you very much for answering! The code does exactly what I needed!

Pencho Ilchev · Accepted Answer · 2012-05-21 18:12:51Z

Your code with comments

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Change Array Value</title>

</head>

<body>
<textarea id="log2"></textarea>
<input type="button" onClick="uClicked();" value="Click!">
<script>
var fer=[];

for (i=0; i< 15; i++){ //use var i, otherwise you are putting i in the global scope
        fer[i]=i+1;
}

function uClicked(fer){ // fer is undefined because you are not passing argument when you call the function
    fer[12] = 10; 
    return fer[12];
}
log2.value = "fer[12]= " + fer[12]; //log2 is not defined.

</script>
</body>
</html>

The working code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Change Array Value</title>

</head>

<body>


<textarea id="log2"></textarea>
<input type="button" onclick="uClicked();" value="Click!" />
<script type="text/javascript">
var fer = [];
for(var i; i < 15; i++){
        fer[i]=i+1;
}
var log2 = document.getElementById("log2");
function uClicked(){
    fer[12] = 10; 
    log2.value = "fer[12]= " + fer[12];
    return fer[12];
}
</script>



</body>
</html>

Thank you for your answer! Especially the comments were very helpful in order to understand what I did wrong. I have also noticed that return fer[12]; is not necessary for the program to work. Have a good day!
@glinyon Glad to help. btw, consider upvoting the answers which you find useful.
I tried to upvote, but unfortunately it needs 15 reputation. I will keep it in mind for when I have it. Cheers!

Collectives™ on Stack Overflow

How to change value of an array element through javascript?

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related