JavaScript 如何在一個DIV中打印一個Label？

Question

例如，我有 4 個標記為 a1、a2、a3、a4 的框。 當有人點擊 2 個框時，我希望 label（以 a1、a2 為例）在 html output 上打印。我只花了一個多小時，我能想到的最好結果是打印 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;
}

Answer 1

label實際上並不是<div>標簽的標准屬性。 如果您只是在尋找快速解決方案，可以嘗試id 。 此外，您正在以一種非常奇怪的方式訪問所有內容。

1. 您應該將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>

2. 向所有要成為您的“輸出”的div元素添加一個唯一的id 。 這將允許您的代碼將“輸出”定向到正確的元素。

<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. 最后，對您的 JavaScript 進行了一些更改。您將看到的第一個更改是我將document.querySelector('.btn')更改為document.querySelectorAll('.btn') 。 這些方法之間的區別在於第一個方法只選擇它找到的第一個與選擇器匹配的元素，而第二個方法選擇所有與選擇器匹配的元素並創建一個數組。

接下來，我們遍歷該數組，為每個元素添加一個事件偵聽器。

之后，我們向printLabel() function 添加一個參數e （用於事件），因為addEventListener()在回調 function ( printLabel ) 中傳遞了一個事件 object。 這個 object 給出了與事件相關的目標元素的信息。

接下來，我們獲取事件的目標元素，即您的button 。 然后我們得到你的button的parentElement因為你的id或“標簽”在父元素上。 然后，您可以從父元素的id中獲取名稱。

請注意，請記住id屬性不能有空格或. 或#或除_之外的大多數特殊字符。

最后，我們需要 select 你的“輸出”元素，我們將使用id來做到這一點。

document.querySelector('#' + name + '-output'); 將獲得具有給定name + -output的id的元素。 例如，如果您單擊按鈕a1 ，這將獲得id為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來幫助你。

如果您有任何問題，請告訴我。

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

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

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