javascript如何使输入影响回显

Question

在这个问题中，当我用按钮将一个数字和数量相加时，我想改变总数，但它没有改变，这是这一行：

<td width="20%" class="Text-center"><?php echo number_format($producto['PRECIO']*$producto['CANTIDAD'],2);  ?></td>

下面是php代码

  <tr>
        <td width="40%"><?php echo $producto['NOMBRE'] ?></td>
        <td><button onclick="add_number()">mas</button><input type="text" id="suma" name="suma" value="<?php echo $producto['CANTIDAD'] ?>" readonly="readonly"></input></td>
        <td width="20%" class="Text-center"><?php echo $producto['PRECIO'] ?></td>
        <td width="20%" class="Text-center"><?php echo number_format($producto['PRECIO']*$producto['CANTIDAD'],2);  ?></td>
        <td width="5%">
            <form action="" method="post">
                <input type="hidden" 
                name="id" 
                value="<?php echo openssl_encrypt($producto['ID'],COD,KEY); ?>">



                <button 
                class="btn btn-danger" 
                type="submit"
                name="btnAccion"
                value="Eliminar"
                >Eliminar</button>

            </form>

    </td>
    </tr>

以下是Java代码：

function add_number() {

    var first_number = parseInt(document.getElementById("suma").value);
    var result = first_number + 1;

    document.getElementById("suma").value = result

}

Answer 1

在函数add_number中增加数量值，也可以每次将价格添加到表的总单元格中，如下更改JavaScript函数：

function add_number() {
    var suma = parseInt(document.getElementById("suma").value); /* get current quantity */
    var total = parseInt(document.getElementById("total").innerHTML); /* get current total */
    var percio = parseInt(document.getElementById("percio").innerHTML); /* get price */

    document.getElementById("suma").value = suma + 1; /* change quantity */
    document.getElementById("total").innerHTML = (suma + percio).toFixed(2); /* change total */

}

注意innerHTML和value的用法。区别在于value用于<input>标记，而innerHTML用于<td>标记

还要注意的是，您需要为total cell和price cell设置sed id，以便在JavaScript函数中读取和写入它们

<td width="20%" class="Text-center" id="percio">
    <?php echo $producto['PRECIO'] ?>
</td>
<td width="20%" class="Text-center" id="total">
    <?php echo number_format($producto['PRECIO']*$producto['CANTIDAD'],2);  ?>
</td>