I have a couple buttons that are made in javascript, and a div in html, i want to know how can i select a certain button like button #1 and then add a link to it and also change the backgorund image. Mostly just need help with selecting a certain button the rest i can do.

//get previous triggers and convert them into 0 and 1
let trigger = (localStorage.getItem("trigger")||"").split(",").map(a =>  !! a);

function done(e)
{
  const button = e.target;
  //get position of the button within parent element
  const index = Array.prototype.indexOf.call(button.parentNode.children, button),
            lastButton = button.parentNode.children.length-1;

  if (index == lastButton) //last button is our "check" button
  {
    //get sum of our triggers and compare with number of our buttons minus "check" button
    if (trigger.reduce((a,b) => b a, 0) == lastButton)
    {
      alert('hello');
    }
  }
  else  
  {
    trigger[index] =  !trigger[index]; //toggle trigger
//    trigger[index] = 1; //set trigger
  }

  button.classList.toggle("set",  trigger[index]); //set style
  localStorage.setItem("trigger", trigger); //store triggers
}

//generate buttons
for(let i = 0; i < 7; i  )
{
  const button = document.createElement("button");
  button.textContent = i 1;
  button.addEventListener("click", done);
  button.classList.toggle("set",  trigger[i]);
  test.appendChild(button);
}
test.lastChild.textContent = "Check";

.set
{
  background-color: lightgreen;
}

<div id="test"></div>

I tried doing this line of code <button.onclick="myFunction()"> and then in myFunction() doing the stuff but that selected all the buttons and when i did <button[i=2].onclick="myFunction()"> it made all the buttons disappear.

JS FIDDLE LINK: https://jsfiddle.net/0crpo81e/

CodePudding user response：

JSFiddle - https://jsfiddle.net/dxvb62yu/

Unsure if I understood your question correctly, but one way to select a specific button is to assign each of them an ID (button.id = i 1;) and then select it with the getElementById() method.

To assign the selected button a link, we can change the button's innerHTML to <a href="#">${originalVal}</a> with originalVal being the button's original value (1, 2, 3 etc..)

For changing the background-image of the page there are quite a lot of resources for you to check out like this, this and this to name a few.

After reading your comments

I updated the above JSFiddle to include the following as well:

So there's this "bug" which if you click the link in the button the done() function gets triggered and displays the alert. This happens only when there is no other button active. All we have to do to fix this is adding the condition lastButton != 0 before alerting "Hello".

Now, when clicking on the link inside the button no alert will shoot. But as it's a link, you'll have to click "around" it for the button to turn green.

CodePudding user response：

let trigger = ""

const buttons = {}

const links = [
  "stackoverflow.com",
  "https://google.com"
]

//generate buttons
for (let i = 0; i < 2; i  ) {
      //create an anchor tag to wrap button inside
      const anchor = document.createElement("a");
      anchor.href = links[i]; //generate hyper link with index value

      const button = document.createElement("button");
      button.id = i   1; // assign id to each button
      button.addEventListener("click", clickButton);
      button.classList.toggle("set",  trigger[i]);
      button.classList.add("btn"   (i   1))

      //add button to the hyper link element
      anchor.appendChild(button);
      
      //add the hyper link element to the main element
      test.appendChild(anchor);
}

const lastButton = document.createElement("button");
lastButton.textContent = "Check";
lastButton.addEventListener("click", check);
test.appendChild(lastButton);

function clickButton(e){
  buttons[e.target.id] = true
  alert(`You click on button ${e.target.id}`)
  localStorage.setItem('button'   e.target.id, 'true');
}

function check() {
  const button1 = localStorage.getItem('button1');
  const button2 = localStorage.getItem('button2');
  if(button1 && button2) {
     alert('Checked!')
  }
}

 .set
{
  background-color: black;
}
button {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 450px;
  width: 200px;
  border: none;
  margin-right:10px;
  color:black
}


button span {
  display: none;
}

.btn1 {
background-image: url("https://www.linkpicture.com/q/alif1.png");
}
.btn2 {
    background-image: url("https://www.linkpicture.com/q/beh1.png");
}

#test {
  display: flex;
}

<div id="test"></div>