时间戳

首页 > 解决方案 > 将 5 添加到产品价格并更新总计

javascript - 将 5 添加到产品价格并更新总计

问题描述

我编写了一些 javascript 脚本，以便：

  1. 检查 textarea 是否不为空并获取 false 或 true 值
  2. 获取第一个选择下拉列表的值
  3. 获取第二个选择下拉列表的值

打算将5 添加到产品价格（字段名称“productprice”）并更新总计（字段名称“total”）。

正如我在检查控制台时看到的那样，我得到了正确的值，

视频链接：返回控制台值

但总字段未填充|更新任何值。

我的代码有什么问题？会欣赏一些专业知识。谢谢。

形式 ：

<form id='form' name='form'>

<label class='control-label col-sm-2'>Inscription</label>
<div class='col-sm-10'>
    <textarea name='desserttextmessage' id='desserttextmessage' class='form-control' rows='5'></textarea>
        <div class='text-danger'></div>
        <p class='help-block'></p>
</div>

<label class='control-label col-sm-2'>Décoration petites fleurs</label>
<div class='col-sm-10'>
    <select class='form-control' id='dessertdecorflowerID' data-value='undefined' name='dessertdecorflowerID'>
        <option value=''>** Veuillez saisir une option Décoration petites fleurs</option>
        <option value='1'>Non</option>
        <option value='2'>Oui</option>
    </select>
    <div class='text-danger'></div>
    <p class='help-block'></p>
</div>

<label class='control-label col-sm-2'>Décoration Chocolat et fruits</label>
<div class='col-sm-10'>
    <select class='form-control' id='dessertdecorchocolateID' data-value='undefined' name='dessertdecorchocolateID'>
        <option value=''>** Veuillez saisir une option Décoration Chocolat et fruits</option>
        <option value='1'>Non</option>
        <option value='2'>Oui</option>
    </select>
    <div class='text-danger'></div>
    <p class='help-block'></p>
</div>

<label class='control-label col-sm-2'>Prix</label>
<div class='col-sm-10'>
    <input type='number' step='1' title='Prix' class='form-control' name='productprice' id='productprice' value='56'>
        <div class='text-danger'></div>
        <p class='help-block'></p>
</div>

<label class='control-label col-sm-2'>Total</label>
<div class='col-sm-10'>
    <input type='number' step='1' title='Total' class='form-control' name='total' id='total' value='0'>
        <div class='text-danger'></div>
        <p class='help-block'></p>
</div>

脚本 ：

function onchangeDessertTextMessage() {

var textmessage = document.getElementById('desserttextmessage');

if(textmessage.value == '') 
{

    // alert('false');
    return false;

}
else

    // alert('true');
    return true;

};

function updateTotal() {

    var textmessage = onchangeDessertTextMessage();

    var selectordecorflower = document.getElementById('dessertdecorflowerID');
    var valuedecorflower = selectordecorflower[selectordecorflower.selectedIndex].value;
            // console.log(valuedecorflower);

    var selectordecorchocolate = document.getElementById('dessertdecorchocolateID');
    var valuedecorchocolate = selectordecorchocolate[selectordecorchocolate.selectedIndex].value;
            // console.log(valuedecorchocolate);

    var productprice = document.getElementById('productprice').value;
    var surcharge = 5;
    var total = parseInt(productprice);
    var totalsurcharge = parseInt(productprice) + parseInt(surcharge);
    // console.log(textmessage);
    // console.log(textmessage);
    // console.log(valuedecorflower);
    // console.log(valuedecorchocolate);

    if (textmessage === true || valuedecorflower > 1 || valuedecorchocolate > 1)

    {

        console.log(totalsurcharge);

    } 

        else if  (textmessage !== true || valuedecorflower < 2 || valuedecorchocolate < 2)

    {

        console.log(productprice);

    } 

};

window.onchange = onchangeDessertTextMessage;
window.onchange = updateTotal;

标签： javascript

解决方案

您正在尝试使用 innerHTML 更新输入字段“total” - 这不适用于文本输入 - 您需要使用 value。

例如document.getElementById('total').value = productprice;

推荐阅读