What I need is to display some info depending on multiple values or selections
For example I need to choose a amount of money($1, $10, $50) then a period of time ( 1 day, 10 days, 50 days) and depending of those two values show some information.
The second value (time) change by the first value ( amount of money ) and the final information, depend on the combination of both.
I'm new to javascript and html so I really have idea where to start, thanks in advance.
As long as your values are all static, this is doable with just html and js.
HTML - make a spot for the two selections and for the result:
<fieldset id="moneyRadios">
<input id="oneDollar" type="radio" name="money" value="1"><label for="oneDollar">$1</label>
<input id="tenDollar" type="radio" name="money" value="10"><label for="tenDollar">$10</label>
<input id="fiftyDollar" type="radio" name="money" value="50"><label for="fiftyDollar">$50</label>
</fieldset>
<fieldset id="dayRadios">
</fieldset>
<div id="result"></div>
JS - first make the money radios do something when clicked
var moneyInputs = document.getElementById('moneyRadios').getElementsByTagName('input');
for (var i =0; i < moneyInputs.length; i++)
{
moneyInputs[i].addEventListener('click',moneyClicked, false);
}
Second, send which money radio was clicked and clear the result
function moneyClicked(moneyRadios) {
var moneySelected = document.querySelector('input[name = "money"]:checked').value;
setDayOptions(moneySelected);
document.getElementById('result').innerHTML ='';
}
Now, you said that the day options would change depending on which money value the user picks, but you only gave one set of day options. I made up some day options for each money value, so modify dayOptions
to your needs with the format 'moneyValue':[dayOption1,dayOption2,dayOption3]
. Then use the money value to make some Day radios and put them in the appropriate fieldset. Then add a click event to the newly made radios.
function setDayOptions(dollars){
var dayOptions = {'1':[1,10,50], '10':[2,20,100], '50':[3,30,150]};
var daysFieldset = document.getElementById('dayRadios');
var selectedDayOptions = dayOptions[dollars];
daysFieldset.innerHTML='';
for (var i = 0; i < selectedDayOptions.length; ++i) {
var dayRad = document.createElement('input');
dayRad.type='radio';
dayRad.id='days'+selectedDayOptions[i];
dayRad.name='day';
dayRad.value=selectedDayOptions[i];
var dayRadLabel = document.createElement('label');
dayRadLabel.htmlFor='days'+selectedDayOptions[i];
var labelText = document.createTextNode(selectedDayOptions[i]+' Days');
dayRadLabel.appendChild(labelText);
daysFieldset.appendChild(dayRad);
daysFieldset.appendChild(dayRadLabel);
}
var dayInputs = document.getElementById('dayRadios').getElementsByTagName('input');
for (var i =0; i < dayInputs.length; i++)
{
dayInputs[i].addEventListener('click',dayClicked, false);
}
}
Finally, do something when a day radio is clicked. You can use the selected values to generate a table, or show a particular pre-made table, or whatever you like. I just displayed the selections and made a rate out of them.
function dayClicked(){
var moneySelected = document.querySelector('input[name = "money"]:checked').value;
var daysSelected = document.querySelector('input[name = "day"]:checked').value;
var rate = moneySelected/daysSelected;
document.getElementById('result').innerHTML = '<p>Money: $'+moneySelected+' Days: '+daysSelected+' is $'+rate+' per day</p>';
}
You can see all the code working here: https://jsfiddle.net/fz44mpmo/4/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments