What does this JavaScript line actually do?

Question

guys, I'm new to Javascript and I understand everything in this code through research, however, I don't understand what the [9] and [12] lines actually do to the code. My guess is that it calls id"msg" when the button is pressed but then what does that do? All help is appreciated.

<!DOCTYPE html>
<html>
<body>


<p>Click the button to sort the array.</p>

<button onclick="RearrangeArray()">Rearrange Array</button>

<p id="msg"></p>



<script>

var products = ["Printer", "Tablet", "Router", "Computer","TV"];
document.getElementById("msg").innerHTML = products;

function RearrangeArray() {
    products.sort();
    document.getElementById("msg").innerHTML = products;
}

</script>

</body>
</html>

Stackoverflow is not the right channel for this question. You'd be best off following a tutorial like the one here: w3schools.com/js/default.asp — Adam Mazzarella, Commented Mar 23, 2017 at 21:49
if you really don't know what this does, why you don't run this code and see the output? — Nicholas, Commented Mar 23, 2017 at 21:49
I know how the code works, it rearranges the array, but what does calling the id"msg" and using .innerHTML and equalling to product do? — JJ.123, Commented Mar 23, 2017 at 21:51
its inserting the array into DOM. It will get the msg id from DOM and will insert the array as his children — Nicholas, Commented Mar 23, 2017 at 21:52
This question is similar to: JavaScript - getElementById (what does it do?). If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass, Commented Oct 30, 2024 at 4:46

Bango · Accepted Answer · 2017-03-23 21:51:02Z

2

Find the <element id="msg"></element>, and whatever is inside of it, erase and replace it with whatever is in the variable products, and parse out any HTML we find in it.

answered Mar 23, 2017 at 21:51

Bango

1,0017 silver badges19 bronze badges

Add a comment |

zhangjinzhou · Accepted Answer · 2017-03-23 21:50:54Z

0

It finds an element with Id of "msg" and set it's value to products, which is a reference to an array.

Basically document means this.

getElementById is a function to locate an element in HTML.

You can understand innerHTML as element's content/value.

answered Mar 23, 2017 at 21:50

zhangjinzhou

2,7015 gold badges25 silver badges49 bronze badges

Add a comment |

Brian · Accepted Answer · 2017-03-23 21:57:26Z

<p>Click the button to sort the array.</p>

// create a new button
// when a user clicks this button, call the RearrangeArray function
<button onclick="RearrangeArray()">Rearrange Array</button>

// create a new paragraph element and set its id to "msg"
// by doing so, you can get a reference to this element and modify the contents
// or attributes using javascript
<p id="msg"></p>


<script>

// define an array containing the following strings
var products = ["Printer", "Tablet", "Router", "Computer","TV"];

// get the paragraph element defined earlier, then set its innerHTML
// property to the products

// because products is not a string, it is coerced to a string by
// joining each of the elements with a comma
document.getElementById("msg").innerHTML = products;


// defines a function that is available globally
// the button above refers to this function in the 'onclick' handler
function RearrangeArray() {

    // sorts the array of products above using the javascript array sort function
    // the products should now look like this: ["Computer", "Printer", "Router", "TV", "Tablet"]
    products.sort();

    // get the element with the id of "msg" (which you defined above)
    // and set its html to the now-sorted array of products (coerced as a string)
    document.getElementById("msg").innerHTML = products;
}

</script>

Yulio Aleman Jimenez · Accepted Answer · 2017-03-23 22:04:04Z

0

All HTML tag can have an id attribute and in a web page it should be unique, this is one of ways you can save a DOM Object of HTML tag in a variable using the document.getElementById("ID_value"). Also, the innerHTML property of a DOM Object store the HTML inside the proper tag of this Object.

So, this line:

document.getElementById("msg").innerHTML = products;

means that the values of the products array are storing as the plain HTML inside the tag that have the msg ID.

answered Mar 23, 2017 at 22:04

Yulio Aleman Jimenez

1,6874 gold badges19 silver badges35 bronze badges

Add a comment |

Collectives™ on Stack Overflow

What does this JavaScript line actually do?

4 Answers 4

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Linked

Related