[英]JavaScript How to Print A Label in a DIV?
I have 4 boxes labeled a1, a2, a3, a4 as an example.例如,我有 4 个标记为 a1、a2、a3、a4 的框。 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.当有人点击 2 个框时,我希望 label(以 a1、a2 为例)在 html output 上打印。我只花了一个多小时,我能想到的最好结果是打印 undefined 和 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;
}
label
isn't really a standard attribute of the <div>
tag. label
实际上并不是<div>
标签的标准属性。 You could try id
if you're just looking for a quick solution.如果您只是在寻找快速解决方案,可以尝试id
。 Also, you're accessing everything in a pretty strange way.此外,您正在以一种非常奇怪的方式访问所有内容。
label
to id
.您应该将label
更改为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. 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
to all of the div
elements that are meant to be your "output".向所有要成为您的“输出”的div
元素添加一个唯一的id
。 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>
document.querySelector('.btn')
to document.querySelectorAll('.btn')
.最后,对您的 JavaScript 进行了一些更改。您将看到的第一个更改是我将document.querySelector('.btn')
更改为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
).之后,我们向printLabel()
function 添加一个参数e
(用于事件),因为addEventListener()
在回调 function ( printLabel
) 中传递了一个事件 object。 This object gives information about the target element related to the event.这个 object 给出了与事件相关的目标元素的信息。
Next, we get the target element of the event and that's your button
.接下来,我们获取事件的目标元素,即您的button
。 Then we get the parentElement
of your button
because your id
or "label" is on the parent element.然后我们得到你的button
的parentElement
因为你的id
或“标签”在父元素上。 Then, you can get the name from the id
of the parent element.然后,您可以从父元素的id
中获取名称。
As a note, remember that id
attributes CANNOT have spaces or .
请注意,请记住id
属性不能有空格或.
or #
or really most special characters besides _
.或#
或除_
之外的大多数特殊字符。
Finally, we need to select your "output" element, and we'll use the id
to do that.最后,我们需要 select 你的“输出”元素,我们将使用id
来做到这一点。
document.querySelector('#' + name + '-output');
will get the element that has an id
with the given name
+ -output
.将获得具有给定name
+ -output
的id
的元素。 For example, if you click button a1
this will get the element with the id
of a1-output
.例如,如果您单击按钮a1
,这将获得id
为a1-output
的元素。 The #
signifies that you're searching for an id
. #
表示您正在搜索id
。
Now that we stored this element in a variable print
, we can place the text in it using the innerHTML
property.现在我们将此元素存储在变量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;
}
I created a JSFiddle to help you.我创建了一个JSFiddle来帮助你。
If you have any questions, please let me know.如果您有任何问题,请告诉我。
<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>
We can use event bubbling and data attributes to our advantage here.我们可以在这里使用事件冒泡和数据属性来发挥我们的优势。 Replace your label
attribute which is non-standard with a data attribute.用数据属性替换非标准的label
属性。 Also, don't use a
if it is not a navigation element, use button
instead.另外,如果它不是导航元素,请不要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>
just change your script part to the following to make it work without changing HTML只需将您的脚本部分更改为以下内容即可使其正常工作而无需更改 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.