Функция JS не использует данный параметр

Question

У меня есть PHP-код, который генерирует html с функцией onclick. На самом деле это список продуктов. Некоторые продукты могут иметь цвета. И мой код создает выпадающее меню для выбора цвета. Для выбора цвета я сделал onclick функцию javascript с параметрами, product_id и выбранным цветом. Я хочу получить выбранный цвет и поместить его вместо изображения продукта. Но он принимает только параметры для первого полученного продукта Мой код:

<?php 
        $query="select * from v_products"; 
     try{ 
      $stmt = $dbh->query($query); 
      $stmt->setFetchMode(PDO::FETCH_ASSOC);    
     }catch (PDOException $pe) { 
      die("Could not connect to the database $dbname :" . $pe->getMessage()); 
     } 
    while ($r = $stmt->fetch()): 
    ?> 
    <div class="col-md-3 col-sm-6 hero-feature"> 
      <div class="thumbnail"> 
       <img src="<?php echo htmlspecialchars($r['photo_url']);?>" alt="" width="800" height="500" id=<?php echo "img".$r['product_id']; ?>> 
       <div class="caption"> 
        <p style="background-color:#FFD700;"><?php echo htmlspecialchars($r['product_name']);?></p> 
        <p>Артикуль:<?php echo htmlspecialchars($r['product_articul']);?></p> 
        <p>Количество:<?php echo htmlspecialchars($r['quantity']);?></p> 
        <p style="font-size:large;" color=red>Цена:<?php echo htmlspecialchars($r['price']);?>&#8364;</p> 
        <p> 
         <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> 
        </p> 
        <?php 
        if($r['number_of_colours']!=0){ 

         $q_palitra="select * from colors where product_id='".$r['product_id']."'"; 
         try{ 
         $stmt1 = $dbh->query($q_palitra); 
         $stmt1->setFetchMode(PDO::FETCH_ASSOC);    
         }catch (PDOException $pe1) { 
          die("Could not connect to the database $dbname :" . $pe1->getMessage()); 
         } 
         ?> 
         <div id="image-dropdown" > 
         <?php 
         $i=1; 
         while ($p = $stmt1->fetch()): 
         ?> 
          <input type="radio" id=<?php echo "line".$i; ?> name="line-style" value=<?php echo $i; ?> onclick="<?php echo "lalalalala('".$r['product_id']."','".$p['color_url']."');";?>" /><label for=<?php echo "line".$i; ?> style="<?php echo "background:url('".$p['color_url']."') 50% 50%;"; ?>"></label> 
         <?php 
         $i++; 
         endwhile; 
         ?> 
         </div> 
         <?php 
         } 
         ?> 
       </div> 

      </div> 
     </div> 
    <?php 
    endwhile; 
    } 
    ?> 

Сгенерированный HTML:

<div class="col-md-3 col-sm-6 hero-feature"> 
      <div class="thumbnail"> 
       <img src="../images/products/batman_ink_by_zombies_616-d5ljte8.jpg" alt="" width="800" height="500" id=img1> 
       <div class="caption"> 
        <p style="background-color:#FFD700;">Крем-мусс</p> 
        <p>Артикуль:223201</p> 
        <p>Количество:5</p> 
        <p style="font-size:large;" color=red>Цена:6&#8364;</p> 
        <p> 
         <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> 
        </p> 
             </div> 

      </div> 
     </div> 
      <div class="col-md-3 col-sm-6 hero-feature"> 
      <div class="thumbnail"> 
       <img src="../images/products/batwing_somewhat_3d_by_qbatmanp.jpg" alt="" width="800" height="500" id=img2> 
       <div class="caption"> 
        <p style="background-color:#FFD700;">Test</p> 
        <p>Артикуль:bla bla bla</p> 
        <p>Количество:2</p> 
        <p style="font-size:large;" color=red>Цена:152&#8364;</p> 
        <p> 
         <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> 
        </p> 
             </div> 

      </div> 
     </div> 
      <div class="col-md-3 col-sm-6 hero-feature"> 
      <div class="thumbnail"> 
       <img src="../images/products/aa.jpg" alt="" width="800" height="500" id=img7> 
       <div class="caption"> 
        <p style="background-color:#FFD700;">Test</p> 
        <p>Артикуль:2225xx</p> 
        <p>Количество:14 4</p> 
        <p style="font-size:large;" color=red>Цена:114&#8364;</p> 
        <p> 
         <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> 
        </p> 
               <div id="image-dropdown" > 
                 <input type="radio" id=line1 name="line-style" value=1 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Access 2007.lnk');" /><label for=line1 style="background:url('../images/palitra/Test/Microsoft Office Access 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line2 name="line-style" value=2 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Excel 2007.lnk');" /><label for=line2 style="background:url('../images/palitra/Test/Microsoft Office Excel 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line3 name="line-style" value=3 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Groove 2007.lnk');" /><label for=line3 style="background:url('../images/palitra/Test/Microsoft Office Groove 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line4 name="line-style" value=4 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office InfoPath 2007.lnk');" /><label for=line4 style="background:url('../images/palitra/Test/Microsoft Office InfoPath 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line5 name="line-style" value=5 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office OneNote 2007.lnk');" /><label for=line5 style="background:url('../images/palitra/Test/Microsoft Office OneNote 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line6 name="line-style" value=6 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Outlook 2007.lnk');" /><label for=line6 style="background:url('../images/palitra/Test/Microsoft Office Outlook 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line7 name="line-style" value=7 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office PowerPoint 2007.lnk');" /><label for=line7 style="background:url('../images/palitra/Test/Microsoft Office PowerPoint 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line8 name="line-style" value=8 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Publisher 2007.lnk');" /><label for=line8 style="background:url('../images/palitra/Test/Microsoft Office Publisher 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line9 name="line-style" value=9 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Word 2007.lnk');" /><label for=line9 style="background:url('../images/palitra/Test/Microsoft Office Word 2007.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line10 name="line-style" value=10 onclick="lalalalala('7','../images/palitra/Test/Digital Certificate for VBA Projects.lnk');" /><label for=line10 style="background:url('../images/palitra/Test/Digital Certificate for VBA Projects.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line11 name="line-style" value=11 onclick="lalalalala('7','../images/palitra/Test/Microsoft Clip Organizer.lnk');" /><label for=line11 style="background:url('../images/palitra/Test/Microsoft Clip Organizer.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line12 name="line-style" value=12 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office 2007 Language Settings.lnk');" /><label for=line12 style="background:url('../images/palitra/Test/Microsoft Office 2007 Language Settings.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line13 name="line-style" value=13 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Diagnostics.lnk');" /><label for=line13 style="background:url('../images/palitra/Test/Microsoft Office Diagnostics.lnk') 50% 50%;"></label> 
                 <input type="radio" id=line14 name="line-style" value=14 onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Picture Manager.lnk');" /><label for=line14 style="background:url('../images/palitra/Test/Microsoft Office Picture Manager.lnk') 50% 50%;"></label> 
                </div> 
              </div> 

      </div> 
     </div> 
      <div class="col-md-3 col-sm-6 hero-feature"> 
      <div class="thumbnail"> 
       <img src="../images/products/MasterCard-Debit.jpg" alt="" width="800" height="500" id=img8> 
       <div class="caption"> 
        <p style="background-color:#FFD700;">Новое</p> 
        <p>Артикуль:15xx1592</p> 
        <p>Количество:10 3</p> 
        <p style="font-size:large;" color=red>Цена:12003&#8364;</p> 
        <p> 
         <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> 
        </p> 
               <div id="image-dropdown" > 
                 <input type="radio" id=line1 name="line-style" value=1 onclick="lalalalala('8','../images/palitra/Новое/11.PNG');" /><label for=line1 style="background:url('../images/palitra/Новое/11.PNG') 50% 50%;"></label> 
                 <input type="radio" id=line2 name="line-style" value=2 onclick="lalalalala('8','../images/palitra/Новое/2.PNG');" /><label for=line2 style="background:url('../images/palitra/Новое/2.PNG') 50% 50%;"></label> 
                 <input type="radio" id=line3 name="line-style" value=3 onclick="lalalalala('8','../images/palitra/Новое/3.PNG');" /><label for=line3 style="background:url('../images/palitra/Новое/3.PNG') 50% 50%;"></label> 
                 <input type="radio" id=line4 name="line-style" value=4 onclick="lalalalala('8','../images/palitra/Новое/4.PNG');" /><label for=line4 style="background:url('../images/palitra/Новое/4.PNG') 50% 50%;"></label> 
                </div> 
              </div> 

      </div> 
     </div> 

Для Javascript он получает только первый идентификатор продукта и первый цвет первого продукта Как получить соответствующие параметры для моего кода javascript.

function lalalalala(o, b){ 
/*if(o.id=='line6'){*/ 
//$("#img"+o).attr('src',b); 
/*}else 
$("#ccc").attr('src',array[0]); 
*/ 
//document.getElementById("'img'+o").src=b+""; 
alert(b); 
} 

Answer 1

Вы назначаете возвращаемое значение функции в событии onclick. Потому что вы хотите назначить различные параметры для различных полей, я хотел бы предложить изменения функции:

function lalalalala(o, b) { 

    return function() { 
     // what you want to happen onclick goes here 
     alert(b); 
    } 

} 

Таким образом, вы на самом деле назначение функции на OnClick событие: Функция возвращенного lalalalalala().

Answer 2

Я попробовал ваш HTML и функцию JS на jsbin.com

Он работал прекрасно. Посмотрите здесь -

http://jsbin.com/setezijabu/edit?html,js,output