我想访问 javascript 函数中的输入字段，其 id 是使用 php 代码生成的
我想将在 javascript 函数中计算的值设置为使用 php 代码生成 id 的输入字段。
将 php 代码分配给 javascript 函数内的变量，然后使用该变量分配以设置输入字段的值。
<td> <input type="text" value="<?php echo $cartr['price'] * $value['quantity']; ?>" id="<?php echo $pricefield; ?>" readonly></td>
function decrement(qty, priceid) {
if (document.getElementById(qty).value >= 2) {
var x=document.getElementById(qty).value;
x--;
document.getElementById(qty).value = x;
var y = document.getElementById(priceid).value;
var sum = x * y;
var fieldname = "<?php echo $pricefield; ?>";
document.getElementById(fieldname).value = sum;
}else{
alert("Quantity cannot be less than 1");
}
}
慕尼黑8549860浏览 90回答 1
1回答
-
30秒到达战场
我根据我对提供的代码片段的解释（类似于我今天早些时候看到的另一个问题）快速整理了一个演示，说明你如何做你想做的事~复制所有并保存为 php 文件以运行。本质上，您想完全分离 PHP 和 Javascript - 还要删除任何内联事件处理程序。通过使用querySelectorAll，sibling selectors您可以非常轻松地遍历 DOM 以识别感兴趣的元素并分配侦听器。如果您使用ID属性然后依赖document.getElementById您自己，因为您必须跟踪 ID - 这当然必须是唯一的。过去的情况是，ID 属性不能简单地是一个整数 - 随着引入的引入而放松了HTML5- 但在 imo 中，使用整数作为 ID 仍然不是一个好习惯。以下内容可能无法完全满足您的要求，但可以很好地了解如何访问 DOM 中的元素并相应地触发函数。祝你好运。<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title>Dynamic elements Price Increment & Decrement</title> <script> document.addEventListener('DOMContentLoaded',()=>{ Array.prototype.slice.call( document.querySelectorAll('td > input[ type="button" ]') ).forEach( input=>{ input.addEventListener('click',function(e){ let qty=this.parentNode.querySelector('input[name="qty[]"]'); let price=this.parentNode.querySelector('input[name="price[]"]'); let sum=this.parentNode.querySelector('input[name="sum[]"]'); switch( this.dataset.dir ){ case 'increment': qty.value++; break; case 'decrement': if( qty.value > 1 ) qty.value--; else { alert( 'Quantity cannot be less than 1' ); } break; } sum.value=qty.value * price.value; }); }); }); </script> <style> table{width:100%;} tr{width:100%;} td{display:flex;justify-content:space-between;align-items:center;align-content:center;} [type='button']{ width:2rem; height:2rem; text-align:center; font-size:1rem; clear:none; cursor:pointer; margin:0.25rem; } [type='text']{ height:2rem; margin:0.25rem; text-align:center; } td *{ display:inline-block; } label{width:20%;} label > input{float:right} label:before{content:attr(data-label)} [readonly]{background:rgba(255,0,0,0.1)} </style> </head> <body> <form> <table> <?php for( $i=1; $i <=10; $i++ ){ $qty=mt_rand(1,10); $price=mt_rand(1,100); printf(' <tr> <td> <input type="button" data-dir="decrement" value="-" /> <label data-label="Quantity" for="qty"><input type="number" name="qty[]" value="%d" min=1 /></label> <label data-label="Price" for="price"><input type="number" name="price[]" value="%d" min=1 readonly /></label> <label data-label="Total" for="sum"><input type="number" name="sum[]" value="%d" readonly /></label> <input type="button" data-dir="increment" value="+" /> </td> </tr>', $qty, $price, $qty * $price ); } ?> </table> </form> </body></html>
随时随地看视频慕课网APP
PHP