JavaScript Как напечатать метку в DIV?

ProgramBox

JavaScript Как напечатать метку в DIV?

Post author:admin
Запись опубликована:5 августа, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

В качестве примера у меня есть 4 коробки с надписями a1, a2, a3, a4. И когда кто-то нажимает на 2 поля, я хочу, чтобы метка (a1, a2 в качестве примера) печаталась в выводе html. Я только что потратил больше часа, и лучшее, что я могу придумать, это напечатать undefined и null.

Извините, вот мой код

 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;
}

1. Пожалуйста, приведите пример кода того, что вы уже пробовали, даже если это не работает

2. Что означает «печать на выходе html»?

3. Например, я хочу присвоить div метку «a1», чтобы, когда кто-то нажимал на этот div, текст a1 печатался на выходе. Извините, я новичок в JS и не знаю всех терминов

Ответ №1:

label на самом деле это не стандартный атрибут <div> тега. Вы могли бы попробовать id , если вы просто ищете быстрое решение. Кроме того, вы получаете доступ ко всему довольно странным образом.

Вы должны изменить label на id . id Атрибут в значительной степени универсален для всех элементов HTML (о которых я знаю) и позволит вам однозначно идентифицировать этот элемент.

 <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>

Добавьте уникальный id для всех div элементов, которые предназначены для вашего «вывода». Это позволит вашему коду направлять «вывод» в нужный элемент.

 <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>

Наконец, пара изменений в вашем JavaScript. Первое изменение, которое вы увидите, это то, что я изменил document.querySelector('.btn') на document.querySelectorAll('.btn') . Разница между этими методами заключается в том, что первый выбирает ТОЛЬКО первый найденный элемент, который соответствует селектору, а второй выбирает все элементы, соответствующие селектору, и создает массив.

Далее мы перебираем этот массив, чтобы добавить прослушиватель событий для каждого элемента.

После этого мы добавляем параметр e (для события) в printLabel() функцию, потому addEventListener() что передает объект события в функции обратного вызова ( printLabel ). Этот объект предоставляет информацию о целевом элементе, связанном с событием.

Далее мы получаем целевой элемент события, и это ваш button . Затем мы получаем parentElement ваш button , потому что ваш id или «метка» находится в родительском элементе. Затем вы можете получить имя из id родительского элемента.

В качестве примечания помните, что id атрибуты НЕ МОГУТ содержать пробелов или . или # или действительно большинства специальных символов _ .

Наконец, нам нужно выбрать ваш элемент «output», и мы будем использовать id для этого.

document.querySelector('#' name '-output'); получит элемент , который имеет id значение с заданным name -output . Например, если вы нажмете кнопку a1 , то получите элемент с символом id of a1-output . Это # означает, что вы ищете id .

Теперь, когда мы сохранили этот элемент в переменной print , мы можем поместить в него текст, используя innerHTML свойство.

 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;
}

Я создал JSFiddle, чтобы помочь вам.

Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать.

1. Большое вам спасибо за ваше подробное объяснение. Я консоль. запишите каждую строку и поймите, что вы сделали. Большое вам спасибо за вашу помощь!

2. Я рад, что смог помочь!

Ответ №2:

     <script>
        function printDiv(divName){
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;

            window.print();

            document.body.innerHTML = originalContents;

        }
    </script>
<h1> do not print this </h1>

<div id='printMe'>
  Print this only 
</div>

<button onclick="printDiv('printMe')">Print only the above div</button>

Ответ №3:

Здесь мы можем использовать отображение событий и атрибутов данных в наших интересах. Замените свой label нестандартный атрибут атрибутом данных. Кроме того, не используйте a , если это не элемент навигации, используйте button вместо этого.

 //Get the divs
let divs = document.querySelectorAll("[data-label]")

for(var i = 0; i < divs.length; i  ){
  //Add the event listener to the DIVs, yes the divs
  divs[i].addEventListener("click", function(event){
    //Did a button fire the event?
    if(event.target.tagName === "BUTTON"){
      //update the output div in the clicked div
      this.querySelector(".output").innerText = this.dataset.label;
    }
  });
}

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

Развернуть фрагмент

Ответ №4:

просто измените свою часть скрипта на следующую, чтобы она работала без изменения HTML

 <script>
  //getting all buttons
  var buttons = document.getElementsByClassName("btn");
  //adding event listner to all buttons
  for (var i = 0; i < buttons.length; i  ) {
    buttons[i].addEventListener("click", printLabel, false);
  }
  function printLabel() {
    const outputDiv = this.parentElement.querySelector(".output"); // this will select only closet div with given class
    outputDiv.innerText = this.parentElement.getAttribute("label");
  }
</script>

Метки: JavaScript Как напечатать метку в DIV?