时间戳

首页 > 解决方案 > html css js 按钮打印功能

javascript - html css js 按钮打印功能

问题描述

我有一个由 8 个按钮组成的网格，另一个具有 9 个无线电类型输入的网格。每个按钮都有一个值（例如 3,44）和无线电类型（例如 0-1 kg）。我有一个完美的工作功能，能够在 div 段落中打印单选类型的值，但我需要更改它以便打印按钮值。

document.querySelectorAll('input[type=radio]').forEach(function(input) {
            //add change event to each input
            input.onchange = function() {
                //calculation for price here
                var price;

                if (this.value == '0-1 kg') {
                    price = 1;
                } else {
                    price = 2;
                };

                //output price here

                document.querySelectorAll('.tabcosti .white')[1].innerText = price;
            };
        })
body {
  font-family: "Open Sans", sans-serif;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}


.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  width: 184px;
  height: 40px;
}

.btn2{
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  width: 184px;
  height: 40px;
}
<div id="button-container" class="justify evenly flex-row">
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
                    </div>
                </div>    
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
                    </div>

                </div>
            </div>
            
            
            
            <div id="radio2" class="flex-row bg m-7 justify evenly">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="5-7 kg" name="Peso"> 5-7 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="7-10 kg" name="Peso"> 7-10 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="10-15 kg" name="Peso"> 10-15 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="15-20 kg" name="Peso"> 15-20 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="20-30 kg" name="Peso"> 20-30 kg
                    </div>
                </div>
            </div>
            
            
            <div class="tabcosti evenly justify flex-row">
                <div class="flex-col">
                    <p id="reso">€ <span class="white"></span></p>
                </div>
                <div class="flex-col">
                    <p>€ <span class="white"></span></p>
                </div>
                <div class="flex-col">
                    <p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
                </div>
            </div>

这是第一个功能，适用于收音机类型。

document.querySelectorAll('input[type=button]').forEach(function(input) {
            //add change event to each input
            input.onclick = function() {
                //calculation for price here, e.g.:
                var price;

                if (this.value == '3,44') {
                    price = 1;
                } else {
                    price = '';
                };

                //output price here

                document.querySelectorAll('.tabcosti .white')[1].innerText = price;
            };
        })
body {
  font-family: "Open Sans", sans-serif;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}


.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  width: 184px;
  height: 40px;
}

.btn2{
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  width: 184px;
  height: 40px;
}
<div id="button-container" class="justify evenly flex-row">
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
                    </div>
                </div>    
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
                    </div>

                </div>
            </div>
            <div id="radio2" class="flex-row bg m-7 justify evenly">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="5-7 kg" name="Peso"> 5-7 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="7-10 kg" name="Peso"> 7-10 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="10-15 kg" name="Peso"> 10-15 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="15-20 kg" name="Peso"> 15-20 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="20-30 kg" name="Peso"> 20-30 kg
                    </div>
                </div>
            </div>
            <div class="tabcosti evenly justify flex-row">
                <div class="flex-col">
                    <p id="reso">€ <span class="white"></span></p>
                </div>
                <div class="flex-col">
                    <p>€ <span class="white"></span></p>
                </div>
                <div class="flex-col">
                    <p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
                </div>
            </div>

这是我试图转换相同的功能以便做同样的事情，但按钮。它不起作用，我不知道为什么

标签： javascripthtmlcss

解决方案

问题就在这里document.querySelectorAll('input[type=button]')。您正在查询输入元素，但您使用了button标签来创建button。

更改input[type=button]为button在querySelectorAll内，一切正常。

推荐阅读