html - JavaScript How to Print A Label in a DIV?

Question

I have 4 boxes labeled a1, a2, a3, a4 as an example. And when someone clicks on 2 boxes, I want the label (a1, a2 as an example) to print on html output. I just spent over an hour and the best I can come up was printing undefined and null.

Sorry, here is my code

HTML
<div class="container">
  <div class="row">
    <div class="col-md-3" label="a1">
      <a class="btn btn-primary" href="#" role="button">Button 01</a>
      <div class="output"></div>
    </div>
    <div class="col-md-3" label="a2">
      <a class="btn btn-primary" href="#" role="button">Button 02</a>
      <div class="output"></div>
    </div>
    <div class="col-md-3" label="a3">
      <a class="btn btn-primary" href="#" role="button">Button 03</a>
      <div class="output"></div>
    </div>
    <div class="col-md-3" label="a4">
      <a class="btn btn-primary" href="#" role="button">Button 04</a>
      <div class="output"></div>
    </div>
  </div>
</div>

const button = document.querySelector('.btn');

button.addEventListener('click', printLabel);

function printLabel(){
  const name = document.querySelector('label');
  const print = document.querySelector('.output');
  print.innerText = name;
}

question from:https://stackoverflow.com/questions/65945246/javascript-how-to-print-a-label-in-a-div

Answer 1

label isn't really a standard attribute of the <div> tag. You could try id if you're just looking for a quick solution. Also, you're accessing everything in a pretty strange way.

1. You should change label to id. The id attribute is pretty much universal to all HTML elements (that I know of) and will allow you to uniquely identify that element.

<div class="container">
  <div class="row">
    <div class="col-md-3" id="a1">
      <a class="btn btn-primary" href="#" role="button">Button 01</a>
      <div class="output"></div>
    </div>
    <div class="col-md-3" id="a2">
      <a class="btn btn-primary" href="#" role="button">Button 02</a>
      <div class="output"></div>
    </div>
    <div class="col-md-3" id="a3">
      <a class="btn btn-primary" href="#" role="button">Button 03</a>
      <div class="output"></div>
    </div>
    <div class="col-md-3" id="a4">
      <a class="btn btn-primary" href="#" role="button">Button 04</a>
      <div class="output"></div>
    </div>
  </div>
</div>

2. Add a unique id to all of the div elements that are meant to be your "output". This will allow your code to direct the "output" to the right element.

<div class="container">
  <div class="row">
    <div class="col-md-3" id="a1">
      <a class="btn btn-primary" href="#" role="button">Button 01</a>
      <div class="output" id="a1-output"></div>
    </div>
    <div class="col-md-3" id="a2">
      <a class="btn btn-primary" href="#" role="button">Button 02</a>
      <div class="output" id="a2-output"></div>
    </div>
    <div class="col-md-3" id="a3">
      <a class="btn btn-primary" href="#" role="button">Button 03</a>
      <div class="output" id="a3-output"></div>
    </div>
    <div class="col-md-3" id="a4">
      <a class="btn btn-primary" href="#" role="button">Button 04</a>
      <div class="output" id="a4-output"></div>
    </div>
  </div>
</div>

3. Finally, a couple of changes to your JavaScript. The first change you'll see is that I changed document.querySelector('.btn') to document.querySelectorAll('.btn'). The difference between these methods is that the first one selects ONLY the first element it finds that matches the selector, but the second one selects all elements that match the selector and creates an array.

Next, we loop through that array to add an event listener for each element.

After that, we add a parameter e (for event) to the printLabel() function because addEventListener() passes an event object in the callback function (printLabel). This object gives information about the target element related to the event.

Next, we get the target element of the event and that's your button. Then we get the parentElement of your button because your id or "label" is on the parent element. Then, you can get the name from the id of the parent element.

As a note, remember that id attributes CANNOT have spaces or . or # or really most special characters besides _.

Finally, we need to select your "output" element, and we'll use the id to do that.

document.querySelector('#' + name + '-output'); will get the element that has an id with the given name + -output. For example, if you click button a1 this will get the element with the id of a1-output. The # signifies that you're searching for an id.

Now that we stored this element in a variable print, we can place the text in it using the innerHTML property.

const button = document.querySelectorAll('.btn');
for(var i=0; i < button.length; i++) {
    button[i].addEventListener('click', printLabel);
}

function printLabel(e) {
  var target = e.target;
  var parent = target.parentElement;
  const name = parent.id;
  const print = document.querySelector('#' + name + '-output');
  print.innerHTML = name;
}

I created a JSFiddle to help you.

If you have any questions, please let me know.