How to make JavaScript dynamic?

Question

I want to move document.getElementById("b") checked in a loop.Is it possible? How can I make it happen?

<img class="img-responsive pic" id="picture" src="images/step1.png">
 <?php
                    //get rows query
                    $query = $db->query("SELECT * FROM `template_design` WHERE `panel` = 'front'");    

                    if($query->num_rows > 0){ 
                        while($row = $query->fetch_assoc()){
                         $im_id = $row['id'];
                         $images = "images/" .$row['image']. "";                           
                    ?>
                 <div class="col-md-4 col-sm-4 wel-grid wow fadeInDown">
                    <div class="wel11">
                        <input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="front" onClick="changeSrc(<?php echo  $im_id; ?>)">
                       <label  for="<?php echo 'radio_'.$im_id; ?>"  style="font-size:12px; cursor: pointer;">
                       <img  id="<?php echo 'picture_'.$im_id; ?>" style="border: 1px solid #ccc;" class="img-responsive" src="<?php echo $images; ?>"></label>
                    </div>
                 </div>
             <?php } } ?>

     <script type="text/javascript">
     function changeSrc(id) {
        if (document.getElementById("radio_"+id).checked) {
     document.getElementById("picture_"+id).src = "images/Ppicture3.png";
        }
}
    </script>

I want to repeat it in a loop ,as fradio0 i.e $front will increment, JavaScript also repeat in a loop to match each.

still i'm facing problem how to make it dynamic as id gets increment — Swagatika
– Swagatika, Commented Aug 12, 2017 at 11:36

Pattatharasu Nataraj · Accepted Answer · 2017-08-12 07:30:27Z

2

You can pass parameters with your id for example:

 <input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="<?php echo $fname; ?>" onClick="changeSrc(<?php echo  $im_id; ?>)">

and use it on script like

  <script type="text/javascript">
     function changeSrc(id) {
        if (document.getElementById("radio_"+id).checked) {

        }
     }
    </script>

edited Aug 12, 2017 at 7:30

answered Aug 12, 2017 at 6:48

Pattatharasu Nataraj

2481 gold badge10 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Swagatika Over a year ago

Thanks for answer,but 'm getting 'Uncaught SyntaxError: Unexpected end of input' error

Pattatharasu Nataraj Over a year ago

can you update the modified code with your question, so that i can identify where you have made the mistake.

Pattatharasu Nataraj Over a year ago

where is id "picture" in your code { document.getElementById("picture").src = "images/Ppicture3.png}";

Pattatharasu Nataraj Over a year ago

add image id like id="<?php echo 'picture_'.$im_id; ?>", and get in javascript like document.getElementById("picture_"+id) hope this is the problem in your code

Pradnya · Accepted Answer · 2017-08-14 07:12:41Z

0

Please try this. Pass radio id as attr id & save each images by respective id's, followed by respective id.png. Also remove onclick function from your html code.

<script type="text/javascript">
  $("input:radio[name=front]").click(function() {
    var id= $(this).attr('id');
    document.getElementById("picture").src = "panel/front/" + id + ".png";
    });
</script>

answered Aug 14, 2017 at 7:12

Pradnya

164 bronze badges

Collectives™ on Stack Overflow

How to make JavaScript dynamic?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related