cant use first letter uppercase in value-CodePudding

i have a select where when i choose the option periodica a div change to display block, the problem is when i want to use the value "Periodica" with uppercase P the js just dont work anymore.

i know i can just send the value periodica but i need to store this value as Periodica

function showDiv(divId, element) {
  document.getElementById(divId).style.display = element.value == "periodica" ? 'block' : 'none';
}

#hidden_div {
  display: none;
}

<select required name="tdonacion"  onchange="showDiv('hidden_div', this)">
  <option value="Puntual">Puntual</option>
  <option value="periodica">Periódica</option>
</select>

<div id="hidden_div">
  <select required name="dperiodica" >
    <option value="Mensual">Mensual</option>
    <option value="Trimestral">Trimestral</option>
    <option value="Semestral">Semestral</option>
    <option value="Anual">Anual</option>
  </select>
</div>

CodePudding user response：

Try this:

JavaScript:

function showDiv(divId, element){
document.getElementById(divId).style.display = element.value == "Periodica" ? 'block' : 'none';}

HTML:

<select required name="tdonacion"  onchange="showDiv('hidden_div', this)">
    <option value="Puntual">Puntual</option>
    <option value="Periodica">Periódica</option>
</select>

CodePudding user response：

 function showDiv(divId, element){
 document.getElementById(divId).style.display = element.value == "Periodica" ? 'block' : 'none';}

#hidden_div {
display: none;}

    <select required name="tdonacion"  onchange="showDiv('hidden_div', this)">
    <option value="Puntual">Puntual</option>
    <option value="Periodica">Periódica</option>
</select>

<div id="hidden_div">
    <select required name="dperiodica" >
        <option value="Mensual">Mensual</option>
        <option value="Trimestral">Trimestral</option>
        <option value="Semestral">Semestral</option>
        <option value="Anual">Anual</option>
    </select>
</div>

value="periodica" change to value="Periodica"

CodePudding user response：

Js is case sensitive. You can test element.value == "Periodica" or use toLowerCase()

if("periodica" == "Periodica"){
  console.log("Js isn't case sensitive")
}else{
  console.log("Js is case sensitive")
}
let text = "Periodica";
if(text.toLowerCase() == "periodica"){
  console.log("works")
}
console.log(text   " didn't change");

CodePudding user response：

You can use toLocaleLowerCase() method.

my suggestion:

function showDiv(divId, element){
 document.getElementById(divId).style.display = element.value.toLocaleLowerCase() == "periodica" ? 'block' : 'none';}

hope it will work for you.