輸入類型范圍輸出不適用於動態ID

Question

當id值是動態的時，輸入類型范圍功能不起作用。

 <input name="gdOverallscore" id="gdOverallscore" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="ageOutputId.value = gdOverallscore.value"/><output id="ageOutputId">0</output> <h2>This is working fine in my case i have dynamic id which is loop"</h2> <br> <input name="gdskill[<?php echo $skillLabel['ssid'];?>]" id="gdskill[<?php echo $skillLabel['ssid'];?>]" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output.value = gdskill[<?php echo $skillLabel['ssid'];?>].value"/> <output id="Output">0</output> <br> <h2> In the second one id values comes like this: gdskill[1],gdskill[3],gdskill[4],gdskill[6] etc.. </h2> 

Answer 1

嘗試這樣使用：像gdOverallscore[0]這樣的ID將不起作用。

 <?php

    $skillLabel['ssid']=10;

    ?>

    <input name="gdOverallscore" id="gdOverallscore" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="ageOutputId.value = gdOverallscore.value"/><output id="ageOutputId">0</output>


    <input  name="gdskill<?php echo  $skillLabel['ssid'];?>"
           id="gdskill<?php echo  $skillLabel['ssid'];?>" 
           type="range"
           min="0" value="0" max="10" step="1" 
           list="ticks" 
           oninput="Output.value = gdskill<?php echo  $skillLabel['ssid'];?>.value"/>
    <output id="Output">0</output>

萬一：

<?php

$skillLabel['ssid'][0]=10;
$skillLabel['ssid'][1]=11;

?>

<?php foreach($skillLabel['ssid'] as $key=>$value){?>
<input  name="gdskill<?php echo  $value;?>"
       id="gdskill<?php echo  $value;?>" 
       type="range"
       min="0" value="0" max="10" step="1" 
       list="ticks" 
       oninput="Output<?php echo  $value;?>.value = gdskill<?php echo  $value;?>.value"/>
<output id="Output<?php echo  $value;?>">0</output>

<?php }?>

演示

Answer 2

您還必須更改您的Ouptut ID，否則所有輸出將變為相同，因此將無法正常工作。

<input name="[]" id="gdskill<?php echo  $skillLabel['ssid'];?>"

 type="range" min="0" value="0" max="10" step="1"

oninput="Output<?php echo  $skillLabel['ssid'];?>.value = gdskill<?php echo  $skillLabel['ssid'];?>.value"/>

<output id="Output<?php echo  $skillLabel['ssid'];?>">0</output>