使用javascript添加/刪除輸入字段

Question

我正在製作取決於選擇下拉菜單的警報按鈕。 JavaScript已經能夠完全按照我的需要讀取和發送<select>下拉列表的值。但是，當顯示觸發警報消息的按鈕時，是我的問題。

ISSUES

- 我也不太清楚，如果我其實去除正確的兒童（語法問題）

- 我似乎無法得到按鈕來顯示。相反，它只執行其onclick命令。

JAVASCRIPT

function displayInfo(key) { 
    alert(key); 
} 

function determineDisplay(Item, ButtonLocation) { 
    // Get selected value from drop down 
    var si = Item.selectedIndex; 
    var sv = Item.options[si].value; 

    // Create View Button to display info 
    var VB = document.createElement("input"); 

    // Assign attributes to button 
    VB.setAttribute("type", "button"); 
    VB.setAttribute("value", "view"); 
    VB.setAttribute("display", "inline-block"); 
    VB.onClick = displayInfo(sv); 

    // Insert button 
    var insertHere = document.getElementsById(ButtonLocation); 
    var CheckChild = insertHere.lastChild; 
    if(lastChild) { 
     insertHere.removeChild(CheckChild); 
     insertHere.appendChild(VB); 
    } 
    else 
     insertHere.appendChild(VB); 
} 

HTML

<div id="SoupBox"> 
    <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');"> 
     <option>--Select--</option> 
<?php foreach($soup_products as $key => $product) : 
$name = $product['name']; $cost = number_format($product['cost'], 2); 
$item = $name . ' ($' . $cost . ')'; 
?> 
     <option value="<?php echo $key; ?>"><?php echo $item; ?></option> 
<?php endforeach; ?> 
    </select> 
    <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" /> 
    <label id="contentView_Two"></label> 

</div> 

的HTML而PHP

<div id="SoupBox"> 
    <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');"> 
     <option>--Select--</option> 
     <option value="CN-CF">Healthy Choice Hearty Chicken ($1.31)</option> 
     <option value="CN-CT">Pacific Foods Organic Creamy Tomato ($3.75)</option> 
     <option value="CN-LT">Amy's Organic Lentil Vegetables ($2.62)</option> 
     <option value="ND-BF">Ramen beef Noddles ($0.50)</option> 
     <option value="ND-CF">Ramen Chicken Noddles ($0.50)</option> 
     <option value="ND-LS">Ramen Lime Shrimp Noddles ($0.50)</option> 
     <option value="ND-SF">Ramen Shrimp Noddles ($0.50)</option> 
    </select> 
    <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" /> 
    <label id="contentView_Two"></label> 

</div> 

Answer 1

不同的概率LEMS這裏：

1. VB.setAttribute("display", "inline-block")：這是錯誤的，因爲在顯示屬性不是元素本身從元素的樣式。改爲使用VB.style.display。

2. VB.onClick = displayInfo(sv)：這是錯誤的，因爲你在這裏做是執行功能的時候了。你可能意味着VB.onclick = function() { displayInfo(sv); }

此外，您可以嘗試添加下列樣式屬性：

VB.style.position = 'absolute'; 
VB.style.left = '5px'; 
VB.style.top = '5px'; 
VB.style.width = '50px'; 
VB.style.height = '20px'; 

，否則我不知道JS會如何呈現它。

Answer 2

修好了，謝謝大家的幫忙。

的JavaScript

function displayInfo(key) { 
    alert(key); 
} 

function determineDisplay(Item, ButtonLocation) { 
    // Get selected value from drop down 
    var si = Item.selectedIndex; 
    var sv = Item.options[si].value; 

    // Create View Button to display info 
    var VB = document.createElement("input"); 

    // Assign attributes to button 
    VB.setAttribute("type", "button"); 
    VB.setAttribute("value", "view"); 
    VB.setAttribute("display", "inline-block"); 
    VB.onclick = function() { displayInfo(sv);}; 

    // Insert button 
    var insertHere = document.getElementById(ButtonLocation); 
    var CheckChild = insertHere.lastChild; 
    if (CheckChild) { 
     insertHere.removeChild(CheckChild); 
     insertHere.appendChild(VB); 
    } 
    else 
     insertHere.appendChild(VB); 
} 

的HTML而PHP

<div id="SoupBox"> 
       <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');"> 
        <option>--Select--</option> 
              <option value="CN-CF">Healthy Choice Hearty Chicken ($1.31)</option> 
              <option value="CN-CT">Pacific Foods Organic Creamy Tomato ($3.75)</option> 
              <option value="CN-LT">Amy's Organic Lentil Vegetables ($2.62)</option> 
              <option value="ND-BF">Ramen beef Noddles ($0.50)</option> 
              <option value="ND-CF">Ramen Chicken Noddles ($0.50)</option> 
              <option value="ND-LS">Ramen Lime Shrimp Noddles ($0.50)</option> 
              <option value="ND-SF">Ramen Shrimp Noddles ($0.50)</option> 
             </select> 
       <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" /> 
       <label id="contentView_Two"></label> 

       </div>