html css js button printing function

Question

I have a grid of 8 buttons and another one with 9 radio type input. Each button has a value (for example 3,44) and the radio type too (example 0-1 kg). i have a perfectly working function to be able to print the value of the radio type inside a div paragraph but i need to change it in order to print the button value instead.

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

this was the first function, the working one for the radio type.

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

this is me trying to transform the same function in order to do the same thing but for buttons. It doesn't work and i don't know why

Charchit Kapoor · Accepted Answer

The problem lies here document.querySelectorAll('input[type=button]'). You are querying for input elements, but you have used a button tag to create a button.

Change input[type=button] to button within querySelectorAll, and everything will work.

html css js button printing function

Answers (1)

Related Questions