如何根据来自 DOM 的值更改变量答案

【问题标题】：How can I change a variable base on the value from DOM如何根据来自 DOM 的值更改变量
【发布时间】：2020-08-17 12:33:27
【问题描述】：

如何根据用户从 HTML 中的选择更改变量，在我的例子中是“docFileID”。例如，如果用户选择 8 月，则 docFileID 将等于 = "qwer" 或者如果用户选择第 9 个月，则 docFileID = "jklk" 等等。

我已经尝试过了，但它不起作用。我在控制台中收到此错误： 在 createPdf 中未捕获（代码：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

我要更改的代码是它的 id ：

function createPdf (name,id,dep,job,sel,docFile,tempFolder,pdfFolder) {


    var docFileID= sel;
    
  
} // createPdf closed

【问题讨论】：

您的 if 正在检查选项的文本而不是值（例如，month-8 的值是 1）。你的第一个 if 也有错别字
如果您查看您的选项，这些值是 1、2 3 等，而不是第 8 个月、第 9 个月等。您的 if 正在检查月份而不是 1，因此您将始终以别的。你的错字是“mothe-8”
谢谢我知道我在文本中的错误，而不是选项值。一旦我改变它就可以了。

标签： javascript html dom google-apps-script

【解决方案1】：

value 属性是指 HTML 中的值，而不是 option 元素的文本。另外，逻辑一团糟，你应该使用switch 或至少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>

【讨论】：

【解决方案2】：

我把js改成

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' ;
    }    
    }

【讨论】：