Jquery - How to dynamically create variables and use them in anchor?

TheDeadMan
February 15, 2024
90 views
0 votes
2 Answers

I have a simple HTML page where I show the buttons, the buttons are added by the user, user can add multiple buttons. the buttons have anchors, which I need to pass variables.

So far I am doing it manually like this:

The Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="ad.size" content="width='320',height='320" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>interactive Interactive Images</title>
</head>

<script>
    let buttons = [
          {
            buttonId: 103676,
            link: "ww.google.com",
          },
          {
            buttonId: 432549,
            link: "www.yahoo.com",
          },
        ];
    
        var clickTag1 = "www.google.com";
        var clickTag2 = "www.yahoo.com";
</script>

<body>
    <div class="conatiner">
        <a href="javascript:window.open(window.clickTag1)">
            <div data-id="103676" class="button-simple">first points</div>
        </a>

        <a href="javascript:window.open(window.clickTag12)">
            <div data-id="432549" class="button-simple">first points</div>
        </a>
    </div>
</body>

</html>

Because users can have multiple buttons I do not want to add the variables to the anchors manually as I do know.

How can create those variables clickTag1, clickTag2 clickTag3 ….. etc based on available buttons and pass them to anchors?

Expected result

For example, if we have an array of buttons like this

 let buttons = [
      {
        buttonId: 103676,
        link: "ww.google.com",
      },
      {
        buttonId: 432549,
        link: "www.yahoo.com",
      },
    ];

The final html should be like this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script>
     var clickTag1 = "www.google.com";
    var clickTag2 = "www.yahoo.com";
</script>
<body>
  <div class="conatiner">
    <a href="javascript:window.open(window.clickTag1)">
      <div data-id="103676" class="button-simple">first points</div>
    </a>

    <a href="javascript:window.open(window.clickTag12)">
      <div data-id="432549" class="button-simple">first points</div>
    </a>
  </div>
</body>
</html>

Answers

I have removed the button because like people said you cant have buttons inside of anchor tags. I have reused your buttons variable. Looped through it and created a link for each button. You can modify this to be a button that calls a function that opens a page if you want to use buttons instead of anchors.

The script has also moved to the bottom so that the container exists before executing.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="ad.size" content="width='320',height='320" />
  <link rel="stylesheet" href="css/styles.css" />
  <title>interactive Interactive Images</title>
</head>

<body>
  <div class="container">
  </div>
  <script>
  let buttons = [{
      buttonId: 103676,
      link: "ww.google.com",
    },
    {
      buttonId: 432549,
      link: "www.yahoo.com",
    },
  ];
  const createButton = ({
    buttonId,
    link
  }) => {
    const a = document.createElement("a")
    a.textContent = "first points";
    a.href = link;
    a.setAttribute('data-id', buttonId);
    a.setAttribute('target', "_blank"); // open in new tab behvaiour
    return a;
  }
  const container = document.getElementsByClassName("container")[0]; // P.S. you spelt container wrong in your id!
  buttons.forEach(button => container.appendChild(createButton(button)));
</script>
</body>

</html>

Not sure why you want it like that, but to make a dynamic variable, you can use this syntax:

window[`clickTag${buttonCounter}`] = link;

Example:

let buttons = [{
    buttonId: 103676,
    link: "ww.google.com",
  },
  {
    buttonId: 432549,
    link: "www.yahoo.com",
  },
];

var clickTag1 = "www.google.com";
var clickTag2 = "www.yahoo.com";

const container = document.getElementsByClassName("container")[0];
const add = document.getElementById('add');

add.addEventListener('click', () => {
  const buttonId = document.getElementById('id');
  const link = document.getElementById('link');

  buttons.push({
    buttonId: id.value,
    link: link.value
  });

  window[`clickTag${buttons.length}`] = link.value; // add this

  const newA = document.createElement('a');
  newA.setAttribute('href', `javascript:void(window.open(clickTag${buttons.length}))`);
  const newAChild = document.createElement('div');
  newAChild.setAttribute('data-id', id.value);
  newAChild.setAttribute('class', 'button-simple');
  newAChild.innerText = `${buttons.length} points`;
  newA.appendChild(newAChild);
  container.appendChild(newA);
});

<input id="id" type="text" placeholder="id" />
<br>
<input id="link" type="text" placeholder="link" />
<br>
<button id="add">Add</button>

<div class="container">
  <a href="javascript:void(window.open(clickTag1))">
    <div data-id="103676" class="button-simple">first points</div>
  </a>

  <a href="javascript:void(window.open(clickTag2))">
    <div data-id="432549" class="button-simple">second points</div>
  </a>
</div>

That should generate something like:

<a href="javascript:void(window.open(clickTag3))">
  <div data-id="23535" class="button-simple">
    3 points
  </div>
</a>

You can verify that the new clickTags are added as new variables from the console:

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – How to dynamically create variables and use them in anchor?

Answers