Javascript 需要为for循环创建的输入调用js函数

这是我的HTML：

<?php foreach($proddata as $p){ ?>
<div class="row">
     <div class="col-md-3">
          <div class="form-group">
               <input type="checkbox" name="productnames[]" id="productnames" value="<?php echo $p->p_id;?>" style="width:10%;" <?php if(isset($_POST['productnames'])) echo "checked='checked'"; ?>  />
               <?php echo $p->p_name;?>
         </div>
     </div>
     <div class="col-md-9">
          <div class="form-group" id="products">
               <input type="number" id="<?php echo "h".$p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction()"  onclick="myFunction()"  
                      value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="height"/>
               <input type="number" id="<?php echo "w".$p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction()"  onclick="myFunction()" 
                      value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="width"/>
                <input type="number" id="<?php echo "qt".$p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction()" onclick="myFunction()" value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="quantity"/>
                <input type="text" id="<?php echo "r".$p->p_id;?>" value="" placeholder="Total"/>
                <input type="hidden" id="<?php echo $p->p_id;?>" value=""/>
          </div>
     </div>
</div>
<?php } ?>

请参阅以下内容

我添加了一些类并设置了事件处理程序onload

注意：ID必须是唯一的

您还可以创建一个总计，并将其添加到内部循环中


window.onload=function（）{
var val=document.queryselectoral（“.val”）；
对于（var i=0；i0？总计：“”；
}
}
}
VAL[0].oninput（）；//执行初始计算
}

名字1
名称2
请参见以下内容

我添加了一些类并设置了事件处理程序onload

注意：ID必须是唯一的

您还可以创建一个总计，并将其添加到内部循环中


window.onload=function（）{
var val=document.queryselectoral（“.val”）；
对于（var i=0；i0？总计：“”；
}
}
}
VAL[0].oninput（）；//执行初始计算
}

名字1
名称2
我对您的代码做了一些更改，它可以正常工作

请查收

我将函数调用事件从
onkeyup（）
更改为
onChange（）
，同时更改输入

调用函数时，将当前
$p->p_id
发送到函数。这样，行的选择就更容易了

<?php foreach($proddata as $p){ ?>
<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <input type="checkbox" name="productnames[]" id="productnames" value="<?php echo $p->p_id;?>" style="width:10%;" <?php if(isset($_POST['productnames'])) echo "checked='checked'"; ?>  /><?php echo $p->p_name;?>
        </div>
    </div>
    <div class="col-md-9">
        <div class="form-group" id="products">
            <input type="number" id="h-<?php echo $p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction(<?php echo $p->p_id;?>)" value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="height" />
            <input type="number" id="w-<?php echo $p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction(<?php echo $p->p_id;?>)" value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="width" />
            <input type="number" id="q-<?php echo $p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction(<?php echo $p->p_id;?>)" value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="quantity" />
            <input type="text" id="<?php echo "r".$p->p_id;?>" value="" placeholder="Total"/>
            <input type="hidden" id="<?php echo $p->p_id;?>" value=""/>
        </div>
    </div>
</div>
<?php } ?>
<script>
   function myFunction(id){
        h = parseInt(document.getElementById('h-'+id).value);
        w = parseInt(document.getElementById('w-'+id).value);
        q = parseInt(document.getElementById('q-'+id).value);
        if(!h)h=1;
        if(!w)w=1;
        if(!q)q=1;
        total= h * w * q;
        document.getElementById('r-'+id).value = total;   
    }
</script>


我对你的代码做了一些修改，它正在工作

请查收

我将函数调用事件从
onkeyup（）
更改为
onChange（）
，同时更改输入

调用函数时，将当前
$p->p_id
发送到函数。这样，行的选择就更容易了

<?php foreach($proddata as $p){ ?>
<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <input type="checkbox" name="productnames[]" id="productnames" value="<?php echo $p->p_id;?>" style="width:10%;" <?php if(isset($_POST['productnames'])) echo "checked='checked'"; ?>  /><?php echo $p->p_name;?>
        </div>
    </div>
    <div class="col-md-9">
        <div class="form-group" id="products">
            <input type="number" id="h-<?php echo $p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction(<?php echo $p->p_id;?>)" value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="height" />
            <input type="number" id="w-<?php echo $p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction(<?php echo $p->p_id;?>)" value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="width" />
            <input type="number" id="q-<?php echo $p->p_id;?>" name="<?php echo $p->p_id;?>" class="val" onkeyup="myFunction(<?php echo $p->p_id;?>)" value="<?php if(isset($_POST['productnames'])) {echo "1";} ?>" min=1 step=1 placeholder="quantity" />
            <input type="text" id="<?php echo "r".$p->p_id;?>" value="" placeholder="Total"/>
            <input type="hidden" id="<?php echo $p->p_id;?>" value=""/>
        </div>
    </div>
</div>
<?php } ?>
<script>
   function myFunction(id){
        h = parseInt(document.getElementById('h-'+id).value);
        w = parseInt(document.getElementById('w-'+id).value);
        q = parseInt(document.getElementById('q-'+id).value);
        if(!h)h=1;
        if(!w)w=1;
        if(!q)q=1;
        total= h * w * q;
        document.getElementById('r-'+id).value = total;   
    }
</script>


“长度数组”元素在哪里？这似乎是决定循环次数的因素，但我们无法在代码中看到它，也无法看到它包含的内容。另外
document.getElementById（“r1”）.value=total每次循环时都覆盖相同的字段。当然
document.getElementById（“r”+len）.value=total是否正确？w1和QT1也一样你想使用jQuery吗？@Gyandepsharma:是的，我给了你解决方案。。。请检查一下，“长度数组”元素在哪里？这似乎是决定循环次数的因素，但我们无法在代码中看到它，也无法看到它包含的内容。另外
document.getElementById（“r1”）.value=total每次循环时都覆盖相同的字段。当然
document.getElementById（“r”+len）.value=total是否正确？w1和QT1也一样你想使用jQuery吗？@Gyandepsharma:是的，我给了你解决方案。。。请检查一下。实际上，我需要显示每行onclick事件的总计。将
onChange（）
更改为
onkeyup（）
实际上，我需要显示每行onclick事件的总计。将
onChange（）
更改为
onkeyup（）
每当我在任何“val”类输入中输入一个值时，只有一个问题，“总计”输入框显示0，而不是所有行的占位符“总计”。我需要占位符。有解决方案吗？我改为
document.getElementById（“r”+I）.value=total>0？total:”
I还使用
vals[0].oninput（）触发了立即加载计算。
Yup。工作//用val类循环所有输入：你也能帮忙吗？很抱歉给你添麻烦，但我有点不知所措。有什么问题吗？代码不需要更改-如果所有3个输入都具有class=“val”，则它们将分配oninput事件处理程序。这只是一个问题，每当我在任何“val”类输入中输入值时，总计输入框显示0，而不是所有行的占位符-“总计”。我需要占位符。有解决方案吗？我改为
document.getElementById（“r”+I）.value=total>0？total:”
I还使用
vals[0].oninput（）触发了立即加载计算。
Yup。工作//用val类循环所有输入：你也能帮忙吗？很抱歉给你添麻烦，但我有点不知所措。有什么问题吗？代码不需要更改-如果所有3个输入都具有class=“val”，则将为它们分配oninput事件处理程序