rich_web_development Posted May 3, 2017 Share Posted May 3, 2017 I thought you'd just be able to do something like: <!DOCTYPE html> <html> <body> <button onclick="myFunction1"> Click to add 4 Panel Smooth</button> <button onclick="myFunction2"> Click to add 4 Panel Grained</button> <p id="demo"></p> </body> </html> <script> var products = []; var products, text, fLen, i; fLen = products.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + products[i] + "</li>"; } text += "</ul>"; document.getElementById("demo").innerHTML = text; var btn = document.querySelector("button"); var btnClicked = btn.onclick; function myFunction1(){ if(btnClicked == true){ products.push("4 Panel Smooth"); } } function myFunction2(){ if(btnClicked == true){ products.push("4 Panel Grained"); } } </script> <!DOCTYPE html> <html> <head> <title>What I want it to do</title> </head> <body> <h1>What I want to achieve</h1> <button type="button" id="button1" onclick="myFunction()">Add 4 Panel Smooth</button><br><br> <button type="button" id="button2" onclick="myFunction1()">Add 4 Panel Grained</button><br><br> <button type="button" id="button3" onclick="myFunction2()">Add 4 Panel Grained 2 Glazed</button><br><br> <p id="demo"></p> <script> var products = []; function myFunction1(){ //if button 1 clicked add "4 Panel Smooth" to products array } function myFunction2(){ //if button 2 clicked add "4 Panel Grained" to products array } function myfunction3(){ //if button 3 clicked add "4 Panel Grained Glazed" to products array } var products, text, fLen, i; fLen = products.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + products[i] + "</li>"; } text += "</ul>"; document.getElementById("demo").innerHTML = text; //Itterate through any items that get applied to products array </script> </body> </html> I want to be able to add products to an array, when a button is clicked for that specific product, then display the products that have been clicked on by iterating through the products. Say, just for example, I have three products and when the button is clicked on product 1 and 3 then they will be displayed by being iterated over(same kind of thing you do with PHP and MySQL, select products from database, display them by iterating over them). I have been trying all types of things to try and understand how to do it but I just don't understand JavaScript well enough. I come across a problem of the array needing to be updated from multiple functions. I thought you would just be able to have one single array then click a button to call a function that would add the product to the array but the variables in the function can't be accessed outside the function. So if, I press the button linked to a specific product that calls a function to push an item to the products array, because push would be in a variable inside a function I can't get it to access the array, the array has to be outside the function so that other functions can add products to the array. I would very much appreciate if someone could help me sort this out. Link to comment Share on other sites More sharing options...
Ingolme Posted May 3, 2017 Share Posted May 3, 2017 You should only need one function. First set up your buttons to each have a value: <button type="button" class="add-panel" data-value="4 Panel Smooth">Add 4 Panel Smooth</button><br><br> <button type="button" class="add-panel" data-value="4 Panel Grained">Add 4 Panel Grained</button><br><br> <button type="button" class="add-panel" data-value="4 Panel Grained 2 Glazed">Add 4 Panel Grained Glazed</button><br><br> Create the list that will contain the values: <ul id="demo"></ul> Set up an event listener for the buttons: var buttons = document.getElementsByClassName("add-panel"); for(var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", addPanel, false); } Create the event handler that updates the array and displays its contents in the HTML: var panels = []; function addPanel(e) { // Get a reference to the button that was clicked var button = e.currentTarget; // Add the button's value to the array panels.push(button.getAttribute("data-value")); // Display the contents of the array on the page by generating <li> elements. var demo = document.getElementById("demo"); demo.innerHTML = ""; var li; for(var i = 0; i < panels.length; i++) { li = document.createElement("li"); li.innerHTML = panels[i]; demo.appendChild(li); } } 1 Link to comment Share on other sites More sharing options...
rich_web_development Posted May 3, 2017 Author Share Posted May 3, 2017 WOW! Thanks. I was trying all sorts of stuff for the past two days and just couldn't get my head around it. Thank you very, very, very much! Just tried it and it works I don't suppose, if it's not to much of a cheek, you can tell me how I can adjust it so that it can only add the specific product once? If I click on a button for a product twice it adds the product twice. I plan to have a quantity input underneath that I will try and implement. Again, thanks Link to comment Share on other sites More sharing options...
Ingolme Posted May 3, 2017 Share Posted May 3, 2017 Each time you click a button you will have to loop through the panels array and compare its elements with the button's value. If the value was found then don't add it to the array. A for() loop and a boolean variable should be enough to do that. 1 Link to comment Share on other sites More sharing options...
rich_web_development Posted May 3, 2017 Author Share Posted May 3, 2017 Ok. I'll try and understand what you've given me first then I'm sure I'll be able to work the rest out. Thanks for the quick reply Link to comment Share on other sites More sharing options...
dsonesuk Posted May 3, 2017 Share Posted May 3, 2017 You can use indexOf() https://www.w3schools.com/jsref/jsref_indexof_array.asp to check if value already exists in array, if returned value equals -1 it could not be found, so it will be safe to push button non duplicate value into array. 1 Link to comment Share on other sites More sharing options...
rich_web_development Posted May 3, 2017 Author Share Posted May 3, 2017 2 hours ago, Ingolme said: Each time you click a button you will have to loop through the panels array and compare its elements with the button's value. If the value was found then don't add it to the array. A for() loop and a boolean variable should be enough to do that. is this any good? <script> var buttons = document.getElementsByClassName("add-panel"); for(var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", addPanel, false); } var panels = []; function addPanel(e) { // Get a reference to the button that was clicked var button = e.currentTarget; //----------------------------------------------- //Code to stop items being applied twice to array //----------------------------------------------- for(var i = 0; i < panels.length; i++){ if(panels[i] != button.getAttribute("data-value")){ console.log(panels[i]); }else{ return; } } //----------------------------------------------- //Code to stop items being applied twice to array //----------------------------------------------- // Add the button's value to the array panels.push(button.getAttribute("data-value")); // Display the contents of the array on the page by generating <li> elements. var demo = document.getElementById("demo"); demo.innerHTML = ""; var li; for(var i = 0; i < panels.length; i++) { li = document.createElement("li"); li.innerHTML = panels[i]; demo.appendChild(li); } } </script> Link to comment Share on other sites More sharing options...
Ingolme Posted May 3, 2017 Share Posted May 3, 2017 That code will prevent the function from running as long as there's any value different than the button that was pressed. As dsonesuk pointed out, Javascript has a built-in function called indexOf() to detect if an element exists in an array which I forgot since I've been programming in lower level languages lately. This is how it would work: var value = button.getAttribute("data-value"); if(panels.indexOf(value) != -1) { // Add the button's value to the array panels.push(value); // Display the contents of the array on the page by generating <li> elements. // ... } Link to comment Share on other sites More sharing options...
rich_web_development Posted May 3, 2017 Author Share Posted May 3, 2017 20 minutes ago, Ingolme said: That code will prevent the function from running as long as there's any value different than the button that was pressed. As dsonesuk pointed out, Javascript has a built-in function called indexOf() to detect if an element exists in an array which I forgot since I've been programming in lower level languages lately. This is how it would work: var value = button.getAttribute("data-value"); if(panels.indexOf(value) != -1) { // Add the button's value to the array panels.push(value); // Display the contents of the array on the page by generating <li> elements. // ... } <script> var buttons = document.getElementsByClassName("add-panel"); for(var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", addPanel, false); } var panels = []; function addPanel(e) { // Get a reference to the button that was clicked var button = e.currentTarget; var value = button.getAttribute("data-value"); if(panels.indexOf(value) == -1) { // Add the button's value to the array panels.push(value); // Display the contents of the array on the page by generating <li> elements. var demo = document.getElementById("demo"); demo.innerHTML = ""; var li; for(var i = 0; i < panels.length; i++) { li = document.createElement("li"); li.innerHTML = panels[i]; demo.appendChild(li); } } } </script> Thanks. Got it. "This method returns -1 if the value to search for never occurs." It works You're amazing Link to comment Share on other sites More sharing options...
rich_web_development Posted May 3, 2017 Author Share Posted May 3, 2017 1 hour ago, dsonesuk said: You can use indexOf() https://www.w3schools.com/jsref/jsref_indexof_array.asp to check if value already exists in array, if returned value equals -1 it could not be found, so it will be safe to push button non duplicate value into array. Thanks for the help Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now