I'm making a list of where there are different sections that will have different values and I want to change the text of those sections by using only one id. the sections are named monthly, annually, biannually, and triennially. the monthly section will have a value of "$4" and others will have "Free". those sections should provide text-changing actions when their radio button is clicked. This is the code that I have tried:

The HTML

<input id="rd1" type="radio" name = "Price" checked onclick="radio()"/> 
<label for="rd1">Monthly</label>
<input id="rd2" type="radio" name = "Price"/>
<label for="rd2">Annually</label>
<input id="rd3" type="radio" name = "Price"/>
<label for="rd3">Biannually</label>
<input id="rd4" type="radio" name = "Price"/>
<label for="rd4">Triennially</label>

<div >
  <h1 id="dollar"><span id="icon"></span><span id="number"></span></h1>

The JS / JavaScript

var radio = document.getElementById('rd1');
function radio(){
document.getElementById('dollar').innerText = "Rs : 1150"; 
}

var radio2 = document.getElementById('rd2');
$(radio2).on("click", function(e){
document.getElementById('dollar').innerText = "Free";
});


var radio3 = document.getElementById('rd3');
$(radio3).on("click", function(e){
document.getElementById('dollar').innerText = "Free";
});

var radio4 = document.getElementById('rd4');
$(radio4).on("click", function(e){
document.getElementById('dollar').innerText = "Free";
});

in this code, there are some things I want:

1: The monthly price should be the default and have the data type of Numeric "1125"

2: The other prices will not be the default and will be a string value "Free"

3: They also have a total in which more than one value will be added and the free value will be equal to zero so no amount will be added with other

I'm trying for a whole day like 24 hours for real but can't do it. I hope you help me with this :) <3

CodePudding user response：

Is this the sort of result you were hoping to achieve? There are comments within the code that try to clarify what is happening at each stage and I think it answers points 1-3 but not entirely sure on #3... hope it helps though

// find DOM elements of interest.
let span_number=document.querySelector('.console #number');
let span_icon=document.querySelector('.console #icon');
let tot=document.querySelector('.console #total');

// find the default checked input - this will help populate the "console" items
let def=document.querySelector('input[name="Price"]:checked');

// listen for change events using a delegated listener and process if it originates from RADIO button.
document.addEventListener('change',e=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
    // use the event.target property to identify the element and
    // thus access the dataset attributes and element value.
    span_number.textContent=e.target.dataset.value;
    span_icon.textContent=e.target.dataset.unit || '';
    tot.dataset.value=e.target.value;
  }
});

// at pageload, set the display in the "console" element.
span_number.textContent=def.dataset.value;
span_icon.textContent=def.dataset.unit || '';
tot.dataset.value=def.dataset.value;

#total{color:grey}
#total:before{
  content:attr(id)':';
  margin-right:0.25rem
}
#total:after{
  content:attr(data-value);
}

<!--
  inputs assign a value in accordance with question
  dataset attributes added to provide details cited in question when radio button is checked.
  the "default" - Monthly radio is selected by default as per point #1
  added #total as part of point #3 
-->
<input id="rd1" type="radio" value=1125 data-unit='RS' data-value='1125' name="Price" checked />
<label for="rd1">Monthly</label>

<input id="rd2" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd2">Annually</label>

<input id="rd3" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd3">Biannually</label>

<input id="rd4" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd4">Triennially</label>

<div >
  <h1 id="dollar">
    <span id="icon"></span>
    <span id="number"></span>
  </h1>
  <span id='total'></span>
</div>