I want to make it work multiple times with one function

Question

When the button is clicked, the addQuery("to be execution") function is executed, and the value contained in the button attribute "value='class name'" is added to the class that has the class contained in the function addQuery("to be execution") do.

  <div class="test1">test 1</div>
  <div class="test2">test 2</div>

  <button class="addQuery" value='push-down' onclick='addQuery(".test1")'>button</button>
  <button class="addQuery" value='push-up' onclick='addQuery(".test2")'>button</button>

  <script type="text/javascript" src="./script.js"></script>

const addQueryclass = document.getElementsByClassName("addQuery");
for (let i = 0; i < addQueryclass.length; i++) {
  function addQuery(cwillrun) {
    const toadd = addQueryclass[i].value;
    document.querySelector(cwillrun).className += ` ${toadd}`;
  }
}

In JavaScript there should be only one function, in HTML each element should have a different class value.

E.g

  <div class="test1">test 1</div>

  <button class="addQuery" value='push-down' onclick='addQuery(".test1")'>button</button>

<!--When the button is clicked it should be something like this:  -->
  <div class="test1 push-down">test 1</div>

  <button class="addQuery" value='push-down' onclick='addQuery(".test1")'>button</button>

Can you please solve it with basic javascript without using a framework?

Sorry but your question seems very unclear to me, what exactly do you want? Can you please explain again? — TBA, Nov 18 '21 at 09:30
[Why is using onClick() in HTML a bad practice?](https://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice). Use `addEventListener` instead. It makes no sense to define the same function in a loop. How are you going to call the function, e.g. for `i = 3`? You could define one function and pass `i` as argument. I think this is the wrong platform for this type of question. On a different platform, I would fix your code but here you should ask a specific programming question and _"Here is my code. Why does it not work?"_ is not a specific programming question. — jabaa, Nov 18 '21 at 09:32

score 2 · Accepted Answer · answered Nov 18 '21 at 09:42

If I correctly understand what you trying to do it would be something like this

[...document.getElementsByClassName('addQuery')].forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault;
    
    document
      .getElementsByClassName(el.dataset.target)[0]
      .classList.add(el.dataset.value)
    ;
  });
});

<div class="test1">test 1</div>
<div class="test2">test 2</div>

<button class="addQuery" data-target="test1" data-value="push-down">
  button 1
</button>
<button class="addQuery" data-target="test2" data-value="push-up">
  button 2
</button>

score 1 · Answer 2 · edited Nov 18 '21 at 11:21

function addQuery(element) {
  console.log(document.getElementById(element).innerHTML);
  if (isNaN(document.getElementById(element).innerHTML)) document.getElementById(element).innerHTML = 0;
  document.getElementById(element).innerHTML = parseInt(document.getElementById(element).innerHTML) + 1;
}

<div id="test1">1</div>
<div id="test2">test 2</div>

<button class="addQuery" value='push-down' onclick='addQuery("test1")'>button</button>
<button class="addQuery" value='push-up' onclick='addQuery("test2")'>button</button>

you can try here. https://jsfiddle.net/k43xds9r/

Michael Haddad · Answer 3 · 2021-11-18T20:20:00.663

If I understand you correctly, you have two buttons, each with a value. When the user clicks on a button, its value is added to a corresponding div.

The short answer

First, we'll change the function's parameters list to accept a button, then send the button itself as an argument to the function via the onclick attribute, and finally, add the button's value to the div's classes list.

Notice you should not manually add the new class to className. This way, the class will be added every time the user clicks on the button. Instead, we will simply use the classList.add() function which takes care of this automatically.

_{// I have added basic CSS so we have a visual indication for the class adding}

const addQueryclass = document.getElementsByClassName("addQuery");

function addQuery(button, cwillrun) {
  document.querySelector(cwillrun).classList.add(button.value);
}

.push-down, .push-up { font-weight: bold; }

<div class="test1">test 1</div>
<div class="test2">test 2</div>

<button class="addQuery" value='push-down' onclick='addQuery(this, ".test1")'>button</button>
<button class="addQuery" value='push-up' onclick='addQuery(this, ".test2")'>button</button>

The long answer

As said in the comments, using the onclick attribute inline is bad practice. We do not want to mix HTML (presentation) with JavaScript (behavior). That is why the better way would be to separate them, by writing the entire event handling logic in the JavaScript file.

When we used the onclick attribute, we simply sent the corresponding item's class as an argument. Now that we're not, we need to store these classes somewhere else: in our case, a data-attribute.

for (const button of document.getElementsByClassName("addQuery")) {
  button.addEventListener("click", () => {
    document.querySelector(button.dataset.class).classList.add(button.value);
  });
}

.push-down, .push-up { font-weight: bold; }

<div class="test1">test 1</div>
<div class="test2">test 2</div>

<button class="addQuery" value="push-down" data-class=".test1">button</button>
<button class="addQuery" value="push-up" data-class=".test2">button</button>

Something to consider is that test1 and test2 are classes and not ids. This suggests that you have other items with the same classes (if not, it will be smarter to change those to ids). But since we are using querySelector(), only the first corresponding item will be affected.

for (const button of document.getElementsByClassName("addQuery")) {
  button.addEventListener("click", () => {
    document.querySelector(button.dataset.class).classList.add(button.value);
  });
}

.push-down, .push-up { font-weight: bold; }

<div class="test1">test 1</div>
<div class="test1">test 1</div>
<div class="test2">test 2</div>
<div class="test2">test 2</div>

<button class="addQuery" value="push-down" data-class=".test1">button</button>
<button class="addQuery" value="push-up" data-class=".test2">button</button>

If we want all of them to be affected, we should use querySelectorAll() instead (or document.getElementsByClassName), loop through them, and apply our logic to each and every one.

for (const button of document.getElementsByClassName("addQuery")) {
  button.addEventListener("click", () => {
    document.querySelectorAll(button.dataset.class).forEach(item => {
      item.classList.add(button.value)
    });
  });
}

.push-down, .push-up { font-weight: bold; }

<div class="test1">test 1</div>
<div class="test1">test 1</div>
<div class="test2">test 2</div>
<div class="test2">test 2</div>

<button class="addQuery" value="push-down" data-class=".test1">button</button>
<button class="addQuery" value="push-up" data-class=".test2">button</button>

Another thing to consider is that we are only adding classes to the divs. If we want to remove them when clicking again, we could replace classList.add() with classList.toggle().

for (const button of document.getElementsByClassName("addQuery")) {
  button.addEventListener("click", () => {
    document.querySelectorAll(button.dataset.class).forEach(item => {
      item.classList.toggle(button.value)
    });
  });
}

.push-down, .push-up { font-weight: bold; }

<div class="test1">test 1</div>
<div class="test2">test 2</div>

<button class="addQuery" value="push-down" data-class=".test1">button</button>
<button class="addQuery" value="push-up" data-class=".test2">button</button>

One final thought

This is only one basic way to go. There are many improvements we can make to this code. I strongly suggest that whatever strategy you choose to go for, you then post your final code at Code Review, and get further feedback.

nice and detail answer bro, thanks! – Josua Marcel C Nov 19 '21 at 16:46 — Josua Marcel C, Nov 19 '21 at 16:46

I want to make it work multiple times with one function

3 Answers3

The short answer

The long answer

One final thought