Jump to content
rich_web_development

add to array from multiple functions

Recommended Posts

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. 

 

Share this post


Link to post
Share on other sites

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);
  }
}

 

  • Like 1

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites

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.
  // ...
}

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×