Add/Remove an input field using javascript

Question

I am working on an alert button that gets generated depending on a select drop-down. The JavaScript has been able to read and send the values of the <select> drop-down exactly as I want it to. But, when it comes to displaying the button that triggers the alert message, is my problem.

ISSUES

-- I am not too sure if I am actually removing the child correctly (syntax issue)

-- I can't seem to get the button to display. Instead, it only performs its onclick command.

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 WITHOUT 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

Different problems here:

1. VB.setAttribute("display", "inline-block") : this is wrong, because the display attribute is from the style of the element, not of the element itself. Use VB.style.display instead.

2. VB.onClick = displayInfo(sv) : this is wrong, because what you're doing here is executing the function right away. You probably meant VB.onclick = function() { displayInfo(sv); } VB.onclick = function() { displayInfo(sv); }

Also, you could try adding the following styles attributes:

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

Otherwise I'm not sure how js would render it.

Answer 2

fixed it, thank you all for the help.

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 WITHOUT 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>