首页 \ 问答 \ 为什么我的表单输入值的更改没有出现在Javascript中？(Why is the change to my form input value not appearing in Javascript?)

为什么我的表单输入值的更改没有出现在Javascript中？(Why is the change to my form input value not appearing in Javascript?)

 我正在编写一个脚本来计算客户订购啤酒箱的成本。 有一个动态生成啤酒选项的选择菜单，客户必须从中选择，其中包括商品名称和价格。 用户选择其数量并单击“添加项目”按钮。 单击此按钮时，应将项目的名称和价格添加到“项目描述”列下的第一个可用输入中。 
 

 问题是不会出现对“descriptionInput0”输入的更改。 当我将“firstAvailable”变量记录到控制台时，更改将显示在那里，但不会出现在浏览器中。 我不确定发生了什么事。 有任何想法吗？ 谢谢你的时间。 
 

 这是一个jsFiddle和代码。 
 

 

 
 
 
  
window.onload = calculator();
    
    function calculator() {
    
        var descriptions = new Array("Shamrock Ale", "Lucky Pilsner", "Irish Wheat", "Irish Malt", "Shamrock Rye");
    
        var prices = new Array(24.99, 27.99, 27.99, 32.99, 35.99);
    
        populateSelectMenu(descriptions, prices);
    
        var descriptionMenu = document.getElementById("descriptionMenu");
    
        addButton = document.getElementById("addItem");
        addButton.onclick = function () {
    
            firstAvailable = detectAvailable();
    
            firstAvailable = document.getElementsByName("descriptionInput" + firstAvailable);
            console.log(firstAvailable);
            firstAvailable.value = descriptionMenu.options[descriptionMenu.selectedIndex].text;
        }
    
    }
    
    function populateSelectMenu(descriptions, prices) {
    
        var descriptionMenu = document.getElementById("descriptionMenu");
    
        for (var i = 0; i < descriptions.length; i++) {
            option = document.createElement("option");
            option.value = i;
            option.innerHTML = descriptions[i] + ": $" + prices[i];
            descriptionMenu.appendChild(option);
        }
    
    }
    
    function detectAvailable() {
    
        var descriptionInputs = document.querySelectorAll("input[name^='descriptionInput']");
    
        inputs: for (var i = 0; i < descriptionInputs.length; i++) {
    
            if (descriptionInputs[i].value != '') {
                continue inputs;
            } else {
                var firstAvailable = i;
                break inputs;
            }
    
        }
    
        return firstAvailable;
    }
 
  
  <form name="calculator" id="calculator">
        <div id="userInput">
            <select name="descriptionSelect" id="descriptionMenu"></select>
            <label>Quantity</label>
            <input type="number" name="quantity" min="1" max="10" size="2" value="1">
            <input type="button" value="Add to List" id="addItem">
        </div>
        <table align="center" cellspacing="1" cellpadding="5" width="40%" border="1">
            <thead>
                <tr>
                    <th>Item Description</th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput0" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput0" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput0" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput0" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput1" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput1" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput1" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput1" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput2" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput2" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput2" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput2" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput3" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput3" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput3" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput3" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput4" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput4" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput4" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput4" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="right">Total Price:</td>
                    <td>
                        <input type="text" name="totalPrice" size="5" disabled>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
 
 
 

 


I am writing a script that calculates the cost of a customer's order of beer cases. There is a select menu of dynamically generated options of beer the customer has to choose from which includes the name of the item and it's price. The user selects their quantity and clicks the "Add Item" button. When this button is clicked, the item's name and price should be added to the first available input under the "Item Description" column. 
 

The problem is that the changes to the "descriptionInput0" input do not appear. When I log the "firstAvailable" variable to console, the changes appear there, but not in the browser. I'm not really sure what's going on. Any ideas? Thanks for your time.
 

Here is a jsFiddle and the code.
 

 

 
 
 
  
window.onload = calculator();
    
    function calculator() {
    
        var descriptions = new Array("Shamrock Ale", "Lucky Pilsner", "Irish Wheat", "Irish Malt", "Shamrock Rye");
    
        var prices = new Array(24.99, 27.99, 27.99, 32.99, 35.99);
    
        populateSelectMenu(descriptions, prices);
    
        var descriptionMenu = document.getElementById("descriptionMenu");
    
        addButton = document.getElementById("addItem");
        addButton.onclick = function () {
    
            firstAvailable = detectAvailable();
    
            firstAvailable = document.getElementsByName("descriptionInput" + firstAvailable);
            console.log(firstAvailable);
            firstAvailable.value = descriptionMenu.options[descriptionMenu.selectedIndex].text;
        }
    
    }
    
    function populateSelectMenu(descriptions, prices) {
    
        var descriptionMenu = document.getElementById("descriptionMenu");
    
        for (var i = 0; i < descriptions.length; i++) {
            option = document.createElement("option");
            option.value = i;
            option.innerHTML = descriptions[i] + ": $" + prices[i];
            descriptionMenu.appendChild(option);
        }
    
    }
    
    function detectAvailable() {
    
        var descriptionInputs = document.querySelectorAll("input[name^='descriptionInput']");
    
        inputs: for (var i = 0; i < descriptionInputs.length; i++) {
    
            if (descriptionInputs[i].value != '') {
                continue inputs;
            } else {
                var firstAvailable = i;
                break inputs;
            }
    
        }
    
        return firstAvailable;
    }
 
  
  <form name="calculator" id="calculator">
        <div id="userInput">
            <select name="descriptionSelect" id="descriptionMenu"></select>
            <label>Quantity</label>
            <input type="number" name="quantity" min="1" max="10" size="2" value="1">
            <input type="button" value="Add to List" id="addItem">
        </div>
        <table align="center" cellspacing="1" cellpadding="5" width="40%" border="1">
            <thead>
                <tr>
                    <th>Item Description</th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput0" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput0" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput0" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput0" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput1" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput1" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput1" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput1" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput2" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput2" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput2" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput2" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput3" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput3" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput3" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput3" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput4" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput4" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput4" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput4" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="right">Total Price:</td>
                    <td>
                        <input type="text" name="totalPrice" size="5" disabled>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
 
 
 

 


原文：https://stackoverflow.com/questions/31365078
更新时间：2023-12-05 17:12

最满意答案

 删除图像上的min-height属性。 
 

.ft-gallery-v2 .ft-class-item .image img {
    width: 100%;
    /* min-height: 100%; */
 }


Remove the min-height property on the image.
 

.ft-gallery-v2 .ft-class-item .image img {
    width: 100%;
    /* min-height: 100%; */
 }

相关问答

更多

相关文章

更多
  • javascript 问题
  • HTML5 智能form表单新属性
  • form中如何接收传入的值
  • 请教javascript问题
  • 如何把复选框中的值传到form里？
  • JavaScript 事件
  • JavaScript 事件
  • 关于一个页面多个form问题????????
  • 如何在runtime重载javascript alert函数
  • javascript标准验证

    • 最新问答

    更多
  • 您如何使用git diff文件，并将其应用于同一存储库的副本的本地分支？(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收？(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get（）从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序：页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结？(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow：基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误：RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C＃类名中允许哪些字符？(What characters are allowed in C# class name?)
  • NumPy：将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全？(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet？(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href，而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用：悬停在悬停时：在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)

    • Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号

    本站部分内容来源于互联网，仅供学习和参考使用，请莫用于商业用途。如有侵犯你的版权，请联系我们(neng862121861#163.com)，本站将尽快处理。谢谢合作！