0

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

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

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

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.