如何設置默認值以形成動態創建的元素？

Question

我想用JS和jQuery創建一個SPA。 我已經在其中創建了一個動態表單，用戶可以選擇添加一個特定的字段。在最終的輸出中，他沒有生成和使用的那些字段將導致「未定義」。如果用戶不使用它，有沒有什麼辦法可以像空字符串那樣給它分配一個默認值？

我附上了html和js代碼的片段。

var count1 = 1; 
 
var limit1 = 6; 
 

 
function addInput1(divName) { 
 
    if (count1 == limit1) { 
 
     alert("You have reached the limit of adding " + count1 + " interests"); 
 
    } else { 
 
     var newdiv = document.createElement('div'); 
 

 
     newdiv.innerHTML = "<input type='text' name='myInputs[]' id='int" + (count1 + 1) + "' style='width:100%;' value='' class='text-center' " + 
 
      "placeholder='technology" + (count1 + 1) + "'><br/><br/>"; 
 

 
     document.getElementById(divName).appendChild(newdiv); 
 
     count1++; 
 
    } 
 
}

<form class="form1" style="padding-top: 2%;"> 
 

 
    <div class="text-center"> 
 

 
    <h2><b>Full Name</b></h2><br/> 
 
<input type="text" class="text-center" id="fullname" name="fullname" placeholder="Name" style="width:100%;"><br><br/> 
 

 
<h2><b>Interested in:</b></h2> 
 
    <div id="dynamicInput1"> 
 
    <input type="text" class="text-center" name="interest1" placeholder="technology1" id="int1" style="width:100%;"><br/><br/> 
 
    </div> 
 

 
    <input type="button" class="btn-primary" value="Add another interest" onClick="addInput1('dynamicInput1');" style="width:auto"> 
 
    </div> 
 
    </form>

一旦表單值被放了進去，我用另一個JS來替換它的形式值另一個HTML文件中的原始的HTML文件。如果用戶不生成文本輸入，則會在這些位置輸出未定義的輸出。我附加了該js代碼的一個小塊。我知道明顯的部分，它是未定義的，因爲它是未定義的，但有沒有一種方法可以將一個默認值像一個空字符串？

var experiment1 = function() 
 
      { 
 
var fullname = $("#fullname").val(); 
 
       
 
var int1 = $("#int1").val(); 
 
var int2 = $("#int2").val(); 
 
var int3 = $("#int3").val(); 
 
var int4 = $("#int4").val(); 
 
var int5 = $("#int5").val(); 
 
var int6 = $("#int6").val(); 
 
'<div class="container">' + 
 
    '<div class="row">' + 
 
    '<div class="col-md-3 col-lg-3 col-sm-3 col-xs-3">' + 
 
    '<h3>Interested in</h3>' + 
 
     '</div>' + 
 
     '<div class="col-md-9 col-lg-9">' + 
 
    '<ul class="pull-left" style="font-size:1.4em; padding-top:3%; list-style:none; margin-left:-4%; word-break:normal;">' + 
 
    '<li class="pull-left">' + int1 + '&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</li>' + 
 
    '<li class="pull-left">' + int2 + '&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</li>' + 
 
    '<li class="pull-left">' + int3 + '&#160;&#160;</li><br/>' + 
 
    '<li class="pull-left">' + int4 + '&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</li>' + 
 
    '<li class="pull-left">' + int5 + '&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</li>' + 
 
'<li class="pull-left">' + int6 + '&#160;&#160;</li><br/>' + 
 
        '</ul>' + 
 
        '</div>' + 
 
        '</div>' + 
 
        '</div>' + 
 

 
      } 
 

 
     //passing the value to the main html file 
 

 
     $("#bodytag").html(experiment1);

Answer 1

你可以做一個有條件的檢查，看看是否值是不確定的，例如：

var int1 = $("#int1").val(); 
if (typeof int1 === "undefined") { 
    int1 = ""; 
}