单选类型按钮js打印

Question

我正在建立一个网页，我几乎已经完成了。我还有最后一个问题，我甚至不知道该怎么解决它；0个想法。我有一个9网格的单选按钮在顶部和另一个9网格单选按钮下面。第一个是包装的度量，另一个是重量。我有两个要处理的变量。PV_it和PV_eu。关于这两个变量的数据已经写入了我试图创建的一个js函数中(如果PV_it为0.83，则PV_eu为0.99，依此类推)。这就是问题所在:我必须创建一个函数，计算在PV_it或比索(peso = weight)之间的较高值，然后在我已经放置了一些文本的div中将这个值打印得更高。有人能帮我吗？我不知道该怎么做，逻辑上也不知道，我甚至不知道该怎么做……

​

document.querySelectorAll('.niente').forEach(function(input) {
            input.onchange = function() {
                peso = this.value
            }
        })

        document.querySelectorAll('.ciccia').forEach(function(input) {
            input.onchange = function() {
                PV_it = this.name
                if (PV_it == 0.83) {
                    PV_eu == 0.99
                } else if (PV_it == 1.65) {
                    PV_eu == 1.98;
                } else if (PV_it == 2.48) {
                    PV_eu == 2.98;
                } else if (PV_it == 4.13) {
                    PV_eu == 4.96;
                } else if (PV_it == 5.83) {
                    PV_eu == 7.00;
                } else if (PV_it == 8.20) {
                    PV_eu == 9.84;
                } else if (PV_it == 12.49) {
                    PV_eu == 14.99;
                } else if (PV_it == 16.67) {
                    PV_eu == 20.00;
                } else if (PV_it == 25.00) {
                    PV_eu == 30.00;
                }
            }
        })
/*this is what i came up with to give the variables the right value based on which radio type button has been clicked*/

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

.cont2 {
  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="radio" class="justify m-30 evenly flex-row bg">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="4960" name="0.83"> 31x16x10
                    </div>
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="9900" name="1.65"> 33x20x15
                    </div>
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="14875" name="2.48"> 35x25x17
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="24800" name="4.13"> 40x31x20
                    </div>
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="35000" name="5.83"> 40x35x25
                    </div>
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="49200" name="8.20"> 41x40x30
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="74925" name="12.49"> 45x45x37
                    </div>
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="100000" name="16.67"> 50x50x40
                    </div>
                    <div class="align flex-row">
                        <input class="cont ciccia" type="radio" value="150000" name="25.00"> 60x50x50
                    </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 niente" type="radio" value="1" name="1"> 0-1 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont niente" type="radio" value="2" name="2"> 1-2 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont niente" type="radio" value="3" name="3"> 2-3 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont niente" type="radio" value="4" name="4"> 3-5 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont niente" type="radio" value="7" name="7"> 5-7 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont niente" type="radio" value="10" name="10"> 7-10 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont niente" type="radio" value="15" name="15"> 10-15 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont niente" type="radio" value="20" name="20"> 15-20 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont niente" type="radio" value="30" name="30"> 20-30 kg
                    </div>
                </div>
            </div>
<!--this is where i have to print the higher number (inside <p> inside the <div> tabcosti2). -->
<div class="justify evenly flex-row">
                <div class="flex-col">
                    <p>TARIFFA DI GESTIONE</p>
                </div>
                <div class="flex-col">
                    <p>TARIFFA DI RESO</p>
                </div>
                <div class="flex-col">
                    <p>TARIFFA DI STOCCAGGIO</p>
                </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>

            <div class="flex-row tabcosti2">
                <div class="flex-col justify">
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange sium"></span><span> spedizione</span> ITALIA</p>
                    </div>
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange sium"></span><span> spedizione</span> EUROPA</p>
                    </div>
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange sium"></span><span> spedizione</span> WORLDWIDE*
                            ZONA 6</p>
                    </div>
                </div>
                <div class="flex-col spacer"></div>
            </div>

​

Answer 1

正如其他评论者所说，属于一起的无线电需要具有相同的名称。在您的脚本中，您将获取选定的值并对其进行处理。

尝试我准备的这个反应式vue示例。

​

new Vue({
  el: '#app',
  data() {
    return {
      dimensions: [
        "31 x 16 x 10", "33 x 20 x 15", "35 x 25 x 17", "40 x 31 x 20", "40 x 35 x 25", "41 x 40 x 30", "45 x 45 x 37", "50 x 50 x 40", "60 x 50 x 50"
      ],
      weights: [
        "0 - 1", "1 - 2", "2 - 3", "3 - 5", "5 - 7", "7 - 10", "10 - 15", "15 - 20", "20 - 30"
      ],
      selectedDimension: -1,
      selectedWeight: -1,
      prices: [
        0.83, 1.65, 2.48, 4.13, 5.83, 8.2, 12.49, 16.67, 25
      ]
    }
  },
  computed: {
    highestSelection() {
      return this.selectedDimension > this.selectedWeight? this.selectedDimension : this.selectedWeight;
    },
    managementFee() {
      return 0; // insert your calculation here
    },
    returnRate() {
      return 0; // insert your calculation here
    },
    storageFee() {
      return 0; // insert your calculation here
    },
    shipmentItaly() {
      return this.highestSelection != -1 ? this.prices[this.highestSelection]: 0; // just an example. insert your calculation here
    },
    shipmentEurope() {
      return this.shipmentItaly * 1.2; // just an example. insert your calculation here
    },
    shipmentWorldwide() {
      return this.shipmentItaly * 2; // just an example. insert your calculation here
    }
  },
  filters: {
    price(val) {
      return val.toFixed(2);
    }
  }
})

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

#app {
  font-family: 'Roboto Mono', monospace;
  display: grid;
  gap: 1rem;
  justify-content: center;
}

#app > * {
  padding: 1rem;
  background: #eee;
}

.dimensions, .weights {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
  gap: .5rem;
}

.prices {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
  <div class="dimensions"><label v-for="(dimension, i) in dimensions" :key="`dimension-${i}`"><input type="radio" name="dimension" v-model="selectedDimension" :value="i">{{ dimension }} cm</label></div>
  <div class="weights"><label v-for="(weight, i) in weights"  :key="`weight-${i}`"><input type="radio" name="weight" v-model="selectedWeight" :value="i">{{ weight }} kg</label></div>
  <div class="prices">
    <div>TARIFFA DI GESTIONE</div>
    <div>TARIFFA DI RESO</div>
    <div>TARIFFA DI STOCCAGGIO</div>
    <div>{{ managementFee | price }} €</div>
    <div>{{ returnRate | price }} €</div>
    <div>{{ storageFee | price }} €</div>
  </div>
  <div class="shipments">
    <div>{{ shipmentItaly | price }} € spedizione ITALIA</div>
    <div>{{ shipmentEurope | price }} € spedizione EUROPA</div>
    <div>{{ shipmentWorldwide | price }} € WORLDWIDE* ZONA 6</div>
  </div>
</div>

​