We Keep Coding

How can I change a variable base on the value from DOM

How can I change the variable, in my case "docFileID" based on the user selection from the HTML.
For example, if the user select month-8 then the docFileID will equal = " qwer"
or if the user select month-9 the docFileID = "jklk" and so on.
I have tried this but it is not working. I get this error in the console:
Uncaught at createPdf (Code:30)
HTML
<div class="input-field " style="padding:0.2cm;" >
<select name="name" class="browser-default" id="sel">
<option value="" disabled selected> Choose your option</option>
<option value="1">month-8</option>
<option value="2">month-9</option>
<option value="3">month-10</option>
<option value="4">month-11</option>
<option value="5">month-12</option>
</select>
Javascript
function addRecord (){
var id = document.getElementById('id').value;
var name = document.getElementById('name').value;
var dep = document.getElementById('dep').value;
var job = document.getElementById('job').value;
var sel;
if(document.getElementById("sel").value == "mothe-8"){
sel = '1zjkJ8f';
}
else{
if(document.getElementById("sel").value == "month-9"){
sel = '1mWjyTVx';
} else{
sel = '' ;
}
if(document.getElementById("sel").value == "month-10"){
sel = '1s1GnG3fB7';
} else{
sel = '' ;
}
if(document.getElementById("sel").value == "month-11"){
sel = '1OKuviyHRiWW';
} else{
sel ='' ;
}
if(document.getElementById("sel").value == "month-12"){
sel = '1WbzrU12VEwuMsoE';
} else{
sel = '' ;
}
}
google.script.run.withSuccessHandler(onSuccess).createPdf(name,id,dep,job,sel);
google.script.run.withFailureHandler(onFailure).createPdf();
} // addRecord ended
code that I want to change is its id :
function createPdf (name,id,dep,job,sel,docFile,tempFolder,pdfFolder) {
var docFileID= sel;
} // createPdf closed

the value property refers to the value in the HTML, not to the text of the option element. Also, the logic is a mess, you should use a switch or at least else if
function addRecord(){
var sel;
switch(document.getElementById("sel").value){
case "month-8":
sel = '1zjkJ8f';
break;
case "month-9":
sel = '1mWjyTVx';
break;
case "month-10":
sel = '1s1GnG3fB7';
break;
case "month-11":
sel = '1OKuviyHRiWW';
break;
case "month-12":
sel = '1WbzrU12VEwuMsoE';
break;
default:
sel = '' ;
}
console.log(sel);
}
<div class="input-field " style="padding:0.2cm;" >
<select name="name" class="browser-default" id="sel" onchange="addRecord()">
<option value="" disabled selected> Choose your option</option>
<option value="month-8">month-8</option>
<option value="month-9">month-9</option>
<option value="month-10">month-10</option>
<option value="month-11">month-11</option>
<option value="month-12">month-12</option>
</select>

I changed the js to
var sel;
if(document.getElementById("sel").value == 1){
sel = '1zjkJ8f';
}
else {
if(document.getElementById("sel").value == 2){
sel = '1mWjyTV';
} else if (document.getElementById("sel").value == 3){
sel = 'RLbSNM';
} else if(document.getElementById("sel").value == 4){
sel = '1OKIZ_xvtfNGNeUU3VNME';
} else if (document.getElementById("sel").value == 5){
sel = '1OKuv0-jIZ_xvtfNGNeUU3VNME' ;
}
}

JavaScript onchange event for dynamic dropdown in HTML

I am not sure if I am wording this correctly. I have a dropdown menu, that when an option is selected, the second dropdown pops in and has options for the selected value. This all works great, but now I am trying to give a button to add more dropdowns in JavaScript. The first works, but I cannot get the second value to show.
HTML code:
<table class="table-container">
<tbody><tr><td>
<select class="custom-select" id="mediaSel" name="mediaSel" onchange="dropDownSelect(this.id, 'mediaSel2')">
<option value="">--Select--</option>
<option value="Illustration" name="Illustration">Illustration</option>
<option value="GraphicDesign" name="GraphicDesign">Graphic Design</option>
<option value="MotionGraphics" name="MotionGraphics">Motion Graphics</option>
<option value="WebDesign" name="WebDesign">Web Design</option>
</select>
</td><td>
<select class="custom-select" id="mediaSel2" name="mediaSel2"></select>
</td><td class="buttonRow">
<div id="addRow" class="addButton" onclick="addSelection()"><span class="plus"></span></div>
</td></tr></tbody>
</table>
So from here I was able to add the second dropdown when the onchange event has been fired.
JS code:
function dropDownSelect(s1,s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
var hideSel = document.getElementById("mediaSel2");
s2.innerHTML = "";
if(s1.value == "Illustration") {
var optionArray = ["Select|--select--","ChildrensBooks|Childrens Book Design","FanArt|Fan Art","WallArt|Wall Art"];
}
else if(s1.value == "GraphicDesign") {
var optionArray = ["Select|--select--","Logo|Logo","BusinessCards|Business Cards","Flyers|Flyers","Billboards|Billboards","MagazineAds|Magazine Ads","CatalogeDesign|Cataloge Design","NewsPaperAds|Newspaper Ads"];
}
else if(s1.value == "MotionGraphics") {
var optionArray = ["Select|--select--","LogoAnimation|Logo Animation","Explainers|Explainer Videos","ShortFilms|Short Film Animation","CharacterDesign|Character Design","ProductDesign|Product Design","Animation|Animation"];
}
else if(s1.value == "WebDesign") {
var optionArray = ["Websites|Websites"];
}
if(s1.value == "GraphicDesign" || s1.value == "Illustration" || s1.value == "MotionGraphics" || s1.value == "WebDesign") {
s2.style.display="inline-block";
} else {
s2.style.display="none";
}
for(var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
Like I said this all works great. but the final step is where I am struggling. I have the addButton in HTM that when clicked runs the next js code and gives me the dropdown.
I can't seem to figure out how to attach the function dropDownSelect from above.
addButton JS:
function addSelection() {
var html = '<tr><td><select class="custom-select addClick" id="mediaSel" name="mediaSel" onchange="dropDownSelect2(this.id, "mediaSel2")"><option value="">--Select--</option><option value="Illustration" name="Illustration">Illustration</option><option value="GraphicDesign" name="GraphicDesign">Graphic Design</option><option value="MotionGraphics" name="MotionGraphics">Motion Graphics</option><option value="WebDesign" name="WebDesign">Web Design</option></select></td><td><select class="custom-select" id="mediaSel2" name="mediaSel2"></select></td><td class="buttonRow"><div id="removeRow" class="removeButton" onclick="removeSelection()"><span class="minus"></span></div></td></tr>';
$('tbody').append(html);
}
any thoughts?

You need to escape the inner pair of double quotes around the parameter of the function call:
var html = '... onchange="dropDownSelect2(this.id, \"mediaSel2\")"><option ...`;

Adding another option when the select dropdown is clicked?

I need to add a new select option in my HTML when they click it
<select class="statusButtonChange statusButton " data-value="49506">
<option value="0" selected=""></option>
<option value="1">Close</option>
<option value="2" disabled="" style="color:grey;">Taken</option>
</select>
This new option is dynamic and will be coming from an API response... I'm parsing the var value from the API response but for now, I made it static just to test.
Right now, I have this:
$(document).ready(function () {
var k = 1
$(".statusButton").on('focus', function () {
var value = "Disable";
var new_v = "";
var html = $(".statusButton").html();
if (k == 1) {
if (value == "Disable") {
new_v = "<option value='Disable' >Disable</option>";
}
else if (value == "Enable") {
new_v = "<option value='Enable' >Enable</option>"
}
var full = html + "" + new_v;
$(".statusButton").html(full);
k = 2;
}
});
});
It is working on JSFiddle but when I try to integrate it on my website, it's not reading it, even just the console log. WHat am I doing wrong?

I'm not sure exactly what's wrong, but I think a better approach might be to use jQuery's append method (https://api.jquery.com/append/).
Consider:
...
$(".statusButton").on('focus', function () {
var value = "Disable";
var new_v = "";
var $statusButton = $(".statusButton");
if(k == 1){
if(value == "Disable")
{
$statusButton.append("<option value='Disable' >Disable</option>");
}
else if(value == "Enable")
{
$statusButton.append("<option value='Enable' >Enable</option>")
}
...
If you do things that way, you don't have to mess around with any extra .html calls.

This is short answer without creating too many variable.
$(document).ready(function() {
var k = 1
$(".statusButton").on('focus', function() {
var value = "Disable";
if (k == 1) {
if (value == "Disable") {
$(".statusButton").append("<option value='Disable' >Disable</option>");
} else if (value == "Enable") {
$(".statusButton").append("<option value='Enable' >Enable</option>")
}
k = 2;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="statusButtonChange statusButton " data-value="49506">
<option value="0" selected=""></option>
<option value="1">Close</option>
<option value="2" disabled="" style="color:grey;">Taken</option>
</select>

Select Box onchange Update Multiple Items

I am trying get a select box to use the onchange function to update multiple items surrounding it. Here is my code so far:
function picture() {
var imglink;
var imgprice;
var picture_type = document.getElementById('picture_type').value;
if ("picture_type" == "1") {
imglink = "img1.png";
imgprice = "$xx.xx";
}
if("picture_type" == "2") {
imglink = "img2.png";
imgprice = "$xxx.xx";
}
else {
document.getElementById('iphoneprice').style.display = 'none';
}
document.getElementById('phoneimg').src = imglink;
document.getElementById('iphoneprice').innerHTML = imgprice;
}
And the matching HTML:
<select id="picture_type" onchange="picture()">
<option value="1">iPhone 4</option>
<option value="2">iPhone 4S</option>
</select>
<p id="iphoneprice"></p>
<img id="iphoneimg" src="" />
How could I make it successfully update these two variables simultaneously?

You have a typo (getElementById('phoneimg') should be getElementById('iphoneimg')) and quotes around variable names. This should work:
function picture() {
var imglink;
var imgprice;
var picture_type = document.getElementById('picture_type').value;
if (picture_type == "1") {
imglink = "img1.png";
imgprice = "$xx.xx";
}
else if(picture_type == "2") {
imglink = "img2.png";
imgprice = "$xxx.xx";
} else {
document.getElementById('iphoneprice').style.display = 'none';
}
document.getElementById('iphoneimg').src = imglink;
document.getElementById('iphoneprice').innerHTML = imgprice;
}
jsFiddle example

Onchage select option

This is the code, I'd like to show a hided input when I select the option "other", but it it doesn't work
<select id="transfer_reason" name="transfer_reason">
<option value="text">Text</option>
<option value="email">Email</option>
<option value="integer">Integer</option>
<option value="other">Other</option>
</select>
<input type="text" id="otherdetail" value="" style="display: none;" />
<script type="text/javascript">
window.onload = function() {
var eSelect = document.getElementById('transfer_reason');
var optOtherReason = document.getElementById('otherdetail');
eSelect.onchange = function() {
if(eSelect.options[selectedIndex].value == "other") {
optOtherReason.style.display = 'block';
}
else {
optOtherReason.style.display = 'none';
}
}
}
It work when using selectedIndex
if(eSelect.selectedIndex === 3) {
but I'd like to use the value of option

Just change this:
eSelect.options[selectedIndex].value
to this:
eSelect.options[eSelect.selectedIndex].value
Or as #CoreyRothwell said(and the best/right way):
eSelect.value
You're probably getting(in the console):
selectedIndex is not defined
It worked here.

change
eSelect.options[selectedIndex].value == "other"
to
eSelect.value == "other"

the value in the option tag is Other but you are comparing it with other you should change it like this:
window.onload = function () {
var eSelect = document.getElementById('transfer_reason');
var optOtherReason = document.getElementById('otherdetail');
eSelect.onchange = function () {
var selectedValue = eSelect.options[eSelect.selectedIndex].value;
//OR
selectedValue = eSelect.value;
//BUT the important point is using toLowerCase() like this
if (selectedValue.toLowerCase() == "other") {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
}
Or just do this:
if (selectedValue.toLowerCase() == "Other") {//replace the "other" with "Other"
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}