I'm trying to make an editable character sheet for the game Pathfinder. I have a <select> for choosing a race and a value set to each race. My value is a string though. What I need to do is when a race is selected I need an input form to be updated.
The Javascript should assign a variable for the stat going to be modified. The user would then type in the base stat number and when finished the javascript would then either add or subtract whatever the modifier is from the value entered by the user.
For example: A dwarf gets a +2 to their constitution score. So when a user selects dwarf from the drop down menu I need my script to recognize that and declare a variable equal to 2. The user would then type in the base stat, let's say 13. Once they are done entering in that number the code would automatically update the input field to 15.
I've figured out how to do this for things like <p> but I can't get it for text inputs. I realize the easy thing would be to set the option value to whatever the bonus number is but races effect 3 stats, two positively and one negatively. So I can only understand how to do this with in/else statements. I'm very new to this.
Here is my code. Any help is appreciated greatly.
<script>
function createModifier () {
var race = document.getElementById("race");
if (race = "cat") {
var strMod = 3;
}
else {
var strMod = 1;
}
document.getElementById("strElm").innerHTML = 10 + strMod;
}
</script>
</head>
<body>
<form>
<div id="raceSelector" class="attribute">
<p><strong>Race</strong></p>
<select name="race" id="race">
<option value="aas">Aasimar</option>
<option value="cat">Catfolk</option>
<option value="cha">Changeling</option>
<option value="dha">Dhampir</option>
<option value="dro">Drow</option>
<option value="due">Duergar</option>
<option value="dwa">Dwarf</option>
<option value="elf">Elf</option>
<option value="fet">Fetchling</option>
<option value="gil">Gillman</option>
<option value="gno">Gnome</option>
<option value="gob">Goblin</option>
<option value="gri">Grippli</option>
<option value="hale">Half-Elf</option>
<option value="half">Halfing</option>
<option value="halo">Half-Orc</option>
<option value="hob">Hobgoblin</option>
<option value="hum">Human</option>
<option value="ifr">Ifrit</option>
<option value="kit">Kitsune</option>
<option value="kob">Kobold</option>
<option value="mer">Merfolk</option>
<option value="nag">Nagaji</option>
<option value="orc">Orc</option>
<option value="ore">Oread</option>
<option value="rat">Ratfolk</option>
<option value="sam">Samaran</option>
<option value="str">Strix</option>
<option value="sul">Suli</option>
<option value="svi">Svirfneblin</option>
<option value="syl">Sylph</option>
<option value="ten">Tengu</option>
<option value="tie">Tiefling</option>
<option value="und">Undine</option>
<option value="van">Vanara</option>
<option value="vis">Vishkanya</option>
<option value="way">Wayang</option>
</select>
</div>
<div class="attribute">
<input type="text" onchange="createModifier()"></input>
<p id="modStr"></p>
</div>
/form>
You are saying if (race = "cat") which is telling race to be equal to cat, not determining whether it is or not. You need to use == not =
Anyway, your problem lies in this line
var race = document.getElementById("race");
It should be
var race = document.getElementById("race").value;
How about change it to
if (race.value == "cat") {
var strMod = 3;
The mistake in the above line of code is that you are not comparing strings.
if (race = "cat") {
should be changed to
if (race.value == "cat") {
Related
I have dynamically generated the following dropdown list using jquery for the calculator app I am currently making:
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
What now I try is to access the value attribute of every option, but I don't get far. The examiner is showing the value attribute in the elements tab, I can also find under the options when I look at the properties in the browser, but I am unable to access them via JavaScript.
I tried:
const leftVal = $('#field__left').children('option').attr('value');
also
const leftVal = $('#field__left').children('option').data('value');
but it returned undefined, while:
const leftVal = document.querySelector('#field__left').getAttribute('value');
gave me null.
Anybody has the ide where my mistake lies?
Thank you in advance.
I try is to access the value attribute of every option
You need a loop...
$("#field__left option").each(function(){
console.log($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
$('#field__left').children('option') will return an array of all select option nodes, you have to iterate through it to get values of each option
Here is the simple solution
// get list of an options
var options = $('#field__left option');
// Then, convert that into an array of just the values
var values = $.map(options, e => $(e).val())
console.log(values)
This my custom select menu:
<select name="bankSelect" id="bankSelect" onchange="dispchange(this.form.bankSelect)">
<option>EQUIFAX</option>
<option value = 5 >EQUIFAX</option>
<option value = 6>TRANSUNION</option>
<option value = 7>EXPERIAN</option>
<option value = 8>BANK OF AMERICA</option>
<option value = 9>WELLS FARGO</option>
<option value = 10>CITIBANK</option>
<option value = 11>JPMORGAN</option>
<option value = 12>NAVIENT</option>
<option value = 13>CAPITAL ONE</option>
<option value = 14>U.S BANCORP</option>
</select>
This is my label:
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
I need to change the text within label with the ID='bank to the option i select from the menu i above.
So if i pick the option with value 9, then my label should change the text it's displaying by defualt,'EQUIFAX' to then display 'WELLS FARGO'.
This is what I've tried in my java-script based on googling similar questions:
function dispchange(bankSelect) {
var bsel_index = bankSelect.selectedIndex;
var bselin = bankSelect.options[bsel_index].value;
if(bselin == '6')
document.getElementById("bank").innerHTML = 'Transunion';
else if(opcao == '1')
document.getElementById('complemento').innerHTML = 'Titulo';
}
It does nothing. What am I doing wrong? Is there a better way / another way to change the label? Can I use something other than a label to display my choice from the selection menu? If so, how do I ensure is always displays the choice currently selected?
use option.text instead of option.value:
function dispchange() {
var el = document.getElementById('bankSelect');
document.getElementById('bank').innerHTML = el.options[el.selectedIndex].text;
}
<select name="bankSelect" id="bankSelect" onchange="dispchange()">
<option>EQUIFAX</option>
<option value="5">EQUIFAX</option>
<option value="6">TRANSUNION</option>
<option value="7">EXPERIAN</option>
<option value="8">BANK OF AMERICA</option>
<option value="9">WELLS FARGO</option>
<option value="10">CITIBANK</option>
<option value="11">JPMORGAN</option>
<option value="12">NAVIENT</option>
<option value="13">CAPITAL ONE</option>
<option value="14">U.S BANCORP</option>
</select>
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
function dispchange(bankSelect) {
console.log(document.getElementById("bankSelect").value)
document.getElementById('bank').innerHTML = document.getElementById("bankSelect").value;
}
<select name="bankSelect" id="bankSelect" onchange="dispchange()">
<option value="EQUIFAX">EQUIFAX</option>
<option value="TRANSUNION">TRANSUNION</option>
<option value ="EXPERIAN">EXPERIAN</option>
<option value= "BANK OF AMERICA">BANK OF AMERICA</option>
<option value ="WELLS FARGO">WELLS FARGO</option>
</select>
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
If you can change the value of the options from number to the Bank name then the following code is going to work as you need.
Otherwise, you have to create an array or object with the numbers and Bank names.
Is the above code work for you?
I am new to javascript and cannot find an easy-to-understand answer.
I would like a certain value to get passed to a hidden field when a user selects a certain option from the select dropdown.
I know that there are if/else statements but I'm not sure if that would be used in this situation.
For example: I have a select dropdown of a list of states.
<select name="HomeState" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
As you can see, any option other than California will be rated at a value of 1.
I would like it to where if the user selects the option of California, then the value of $300 will get passed to a hidden form field.
<input name="AmountNeeded" type="hidden" value="300" />
If they select anything other than California, the hidden field would get passed $100
<input name="AmountNeeded" type="hidden" value="100" />
How would I implement this logic? Would it be using if/else statement? I am new and don't exactly know how to set that up.
To keep this simple you could assign ids to the <select> and hidden <input> and listen to the change event via onchange() on the <select> with a function call.
And based on the selected item, change the value of hidden input.
NOTE: To test the snippet out I have removed the type="hidden". Do place it back.
function homeSelected(){
const home = document.getElementById("homeSelector").value;
if(home == 5){
document.getElementById("amountNeeded").value = 300;
}else{
document.getElementById("amountNeeded").value = 100;
}
}
<select id="homeSelector" name="HomeState" onchange="homeSelected()" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
<input id="amountNeeded" name="AmountNeeded" value="100" />
You can do this as follows:
<select name="HomeState" required onChange=myFunction(this)>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
Javascript code is:
<script>
function myFunction(x) {
val = x.options[x.selectedIndex].text;
if(val == 'California')
document.getElementsByName("AmountNeeded")[0].value = 300
else
document.getElementsByName("AmountNeeded")[0].value = 100
}
</script>
If else statement is good for you if you are sure that All other states have value 1 except California. If all states may have different values like some states may have 1 or some may have 2 or some may have 3, then there may be other alternatives to solve this like you can pass give one more attribute data-src-amount to options and give amount to data-src-amount. You can create options like <option value="1" data-src-amount="100">Alabama</option> and in script, you can fetch data-src-amount on select change event instead of if-else statement.
I have a table of pricing based on certain parameters, I'm familiar with the and tags at this point. I would like to know what is the most efficient way to call for a square foot cost based on the selections of three different drop down box selections. The three different boxes would be something along the lines of what code is shown below.
<td> <select id="box1" oninput="calculate()">
<option value="0">Select Glass Pattern</option>
<option value="1">Autumn Leaves</option>
<option value="2">Treebark</option>
</select></td>
<td> <select id="box2" oninput="calculate()">
<option value="0">Select Glass Thickness</option>
<option value="4">5/32 (4mm)</option>
<option value="10">3/8 (10mm)</option>
</select></td>
<td> <select id="box3" oninput="calculate()">
<option value="0">Select Glass Type</option>
<option value="1">Tempered</option>
<option value="2">Annealed</option>
</select></td>
How would I be able to call the appropriate cost from the table below? Given that from the drop-down boxes, I select Tempered Autumn Leaves in 5/32 thickness, to call for the square foot Cost of 27$, versus getting 17$ for the annealed format
Select Glass Select Thickness Tempered or Annealed? Cost
Autumn Leaves 5/32(4mm) Tempered $27.00
Autumn Leaves 5/32(4mm) Annealed $17.00
Treebark 5/32(4mm) Tempered $31.00
Treebark 5/32(4mm) Annealed $19.00
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Titel</title>
</head>
<body>
<select id="box1" onchange="calculate()">
<option value="">Select Glass Pattern</option>
<option value="0">Autumn Leaves</option>
<option value="1">Treebark</option>
</select>
<br>
<select id="box2" onchange="calculate()">
<option value="">Select Glass Thickness</option>
<option value="0">5/32 (4mm)</option>
<option value="1">3/8 (10mm)</option>
</select>
<br>
<select id="box3" onchange="calculate()">
<option value="">Select Glass Type</option>
<option value="0">Tempered</option>
<option value="1">Annealed</option>
</select>
<div id="output">Please select all three values</div>
</div>
<script>
let calculate = () => {
let box1_selection = getValueById("box1");
let box2_selection = getValueById("box2");
let box3_selection = getValueById("box3");
if(box1_selection == "" || box2_selection == "" || box3_selection == "") {
document.getElementById("output").innerHTML = "Please select all three values";
} else {
let value = "not specified";
/*if(box2_selection == 0 && box3_selection == 0 {
value = "$27.00";
} else if(box2_selection == 0 && box3_selection == 1) {
value = "$17.00";
}*/
value = getPrice(box1_selection, box2_selection, box3_selection);
document.getElementById("output").innerHTML = value;
}
}
let getValueById = (id) => {
let selection = document.getElementById(id);
return selection.options[selection.selectedIndex].value;
}
let getPrice = (value_1, value_2, value_3) => {
// price_data is a 3 dimensional array.
let price_data = [
[
["$27.00", "$17.00"],
["not specified", "not specified"]
],
[
["$27.00", "$17.00"],
["not specified", "not specified"]
]
];
return price_data[value_1][value_2][value_3];
}
</script>
</body>
</html>
This solves your question. You need to use onselect and not oninput. Also, IDs need to be unique. Per selection, the values the options can take should be unique too. You see this in my example. My calculate function prints the result by the values you provided by your table. You can extend the calculate function for other combinations. As you see, the first selections value isn't important for the result and the second selection can only have one value to result in a real price.
edit: In this version, you can use either the function to calculate the price, or the if-else construct. The if-else part should be straight forward. In the getPrice function, i use a 3dimensional array. The first dimension is for the value in box1, the second for the value in box2 and the third for the value in box3. See those dimensions as paths in a graph. If you follow those paths, you will get to your specifiedprice. The if-else part is also there, so you can use whatever you like. Also i extracted the code to get the value of a html-selection. If you have specific questions, feel free to ask.
First, you'll want to give your various <option> elements different value attributes so you can distinguish them. I'd recommend giving the 'selection' default an empty string, and unique identifiers for the other selections.
Then you need to work out which value is selected, which can be done with element.options[element.selectedIndex].value, after the element has been obtained with document.getElementById(). Keep in mind this will need to be done inside of the function, as the value will update!
Finally, just check that none of the three values are an empty string, which will mean that they've been selected. From here, I've just outputted the entered values, but you can do whatever calculations you need.
You'll probably only want raw integers for the Tempered / Annealed values, but I've gone with strings to showcase output clearer in the following example:
function calculate() {
var box1 = document.getElementById("box1");
box1_value = box1.options[box1.selectedIndex].value;
var box2 = document.getElementById("box2");
box2_value = box2.options[box2.selectedIndex].value;
var box3 = document.getElementById("box3");
box3_value = box3.options[box3.selectedIndex].value;
console.clear(); // Reset the output
if (box1_value != "" && box2_value != "" && box3_value != "") {
console.log(box1_value, box2_value, box3_value);
}
}
<td>
<select id="box1" oninput="calculate()">
<option value="">Select Glass Pattern</option>
<option value="Autumn Leaves">Autumn Leaves</option>
<option value="Treebark">Treebark</option>
</select>
</td>
<td>
<select id="box2" oninput="calculate()">
<option value="">Select Glass Thickness</option>
<option value="5/32 (4mm)">5/32 (4mm)</option>
<option value="3/8 (10mm)">3/8 (10mm)</option>
</select>
</td>
<td>
<select id="box3" oninput="calculate()">
<option value="">Select Glass Type</option>
<option value="Tempered - $27">Tempered</option>
<option value="Annealed - $17">Annealed</option>
</select>
</td>
I've had a hard time finding a similar question for this, and its probably simple but just slipping my mind.
I've got a drop down menu, you make your selection and submit it, it jumps to 2ndpage.html?location=locationName
I'm trying to create a variable with a value of the "locationName" to use in a link that would use that value as a string like "www.locationName.com",
i've tried using something like
var locationName = getElementById("location").value;
and other similar ways but the variable seems to keep coming up undefined. And this seems to be the only thing stopping me from finishing my project, lol.
Thanks in advance.
You would find the value and text by accessing this.selectedIndex of the selection list. Use http:// for absolute link to a page.
<select id="locations">
<option value="http://www.google.com">Location 1</option>
<option value="http://www.loogle.com" selected="selected">Location 2</option>
<option value="http://www.foogle.com">Location 3</option>
</select>
var e = document.getElementById("locations");
e.addEventListener('change', function (){
var locationValue = this.options[this.selectedIndex].value;//www.loogle.com
var locationText = this.options[this.selectedIndex].text;//Location 2
window.location = locationValue;
});
Try this:
<p>Location: </p>
<select id="location">
<option value="location1">location 1</option>
<option value="location2">location 2</option>
<option value="location3">location 3</option>
</select>
<script>
var locationName = document.getElementById("location").value;
</script>
Or try this:
<p>Location: </p>
<select name="location">
<option value="location1">location 1</option>
<option value="location2">location 2</option>
<option value="location3">location 3</option>
</select>
<script>
var locationName = document.getElementsByName("location")[0].value;
</script>