How can i make the link in a button and bigger and transparent-CodePudding

I have a button with a background image inside is a small text thats part of the button, the link in the button will only work when you press the text, i want the link to work in any part of the button, and if thats not possible i want to make the text bigger(thats very easy) but the make it transperent by only changing the opacity of the text.

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
  console.log(button.id)
  localStorage.setItem("trigger", trigger); //store triggers
}

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

let originalVal = document.getElementById("1").innerHTML // save button's original content aka it's number
document.getElementById("1").innerHTML = `<a href='2.html'>${originalVal}</a>` // assign link to button 
document.getElementById("1").className = "btn1";
let originalVal1 = document.getElementById("2").innerHTML // save button's original content aka it's number
document.getElementById("2").innerHTML = `<a href='2.html'>${originalVal1}</a>` // assign link to button 
document.getElementById("2").className = "btn2";

   .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: 19%;
  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");
}

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

CODE PEN LINK: https://codepen.io/haroon1233212/pen/OJzrMmP

CodePudding user response：

You can wrap button inside a instead, and have the last button separately

One side note, localStorage cannot be used in the sandbox, so I remove that part for demo purposes

let trigger = ""

const buttons = {}

//generate buttons
for (let i = 0; i < 2; i  ) {
      //create an anchor tag to wrap button inside
      const anchor = document.createElement("a");
      anchor.href = (i   1)   '.html'; //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!')
  }
}

You also can add class names of btn1 and btn2 via the loop

The full code

let trigger = ""

const buttons = {}

//generate buttons
for (let i = 0; i < 2; i  ) {
  //create an anchor tag to wrap button inside
  const anchor = document.createElement("a");
  anchor.href = (i   1)   '.html'; //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");
}

 /* Add flexbox to make all child elements displayed horizontally */   
#test {
  display: flex;
}

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

You can check this sandbox