Opening 3 items with one click in Javascript

Question

I'm working on a school project and I need to open multiple documents with one click. I'm working with an image slider, and I've managed to get it to open multiple links. However once I add the same JavaScript to another image on the slider it will open the same one as before, even if I've chaged the source.

 <img src="promo.png" img class="carousel-image" onclick="doOpen()">


   <script type="text/javascript">
function doOpen()
{
window.open("Ticket.png");
window.open("Pattern.png");

}
</script>



          <div class="carousel-caption">
            <p>
              The Complete set of useful documents
            </p>
          </div>
        </div>
        <div class="carousel-feature">
           <img src="promo.png" img class="carousel-image" onclick="doOpen()">

<script type="text/javascript">
function doOpen()
{
window.open("screensaver.mp4");
window.open("Billboard.png");
window.open("Tshirt.png");


}
</script>

          <div class="carousel-caption">

Both images on the slider open ticket.png and pattern.png.

Answer 1

You are defining the same function doOpen twice. That won't work. For a quick fix try this:

<img src="promo.png" class="carousel-image" onclick="doOpen1()">

<script type="text/javascript">
function doOpen1()
{
    window.open("Ticket.png");
    window.open("Pattern.png");
}
</script>

      <div class="carousel-caption">
        <p>
          The Complete set of useful documents
        </p>
      </div>
    </div>
    <div class="carousel-feature">
       <img src="promo.png" class="carousel-image" onclick="doOpen2()">

<script type="text/javascript">
function doOpen2()
{
window.open("screensaver.mp4");
window.open("Billboard.png");
window.open("Tshirt.png");
}
</script>

That said, defining a function like this for every link is not a robust solution. Something even better would be:

<script type="text/javascript">
function doOpen(which)
{
    if(which == "one"){
        window.open("Ticket.png");
        window.open("Pattern.png");
    } else if (which == "two"){
        window.open("screensaver.mp4");
        window.open("Billboard.png");
        window.open("Tshirt.png");
    }
}
</script>

<div class="carousel-feature">
  <img src="promo.png" class="carousel-image" onclick="doOpen('one')">
</div>

<div class="carousel-feature">
   <img src="promo.png" class="carousel-image" onclick="doOpen('two')">
</div>

This would only require you to maintain one function vs however many for each link you have.

Also, you have an extra img in your tags:

<img src="promo.png" img class="carousel-image" onclick="doOpen2()">
                     ^^^ Here
<!-- Should Be: -->
<img src="promo.png" class="carousel-image" onclick="doOpen2()">

The option suggested by Jason would look like this:

<script type="text/javascript">
function doOpen()
{
    for (var i = 0; i < arguments.length; i++){
        window.open(arguments[i]);
    }
}
</script>

<div class="carousel-feature">
  <img src="promo.png" class="carousel-image" onclick="doOpen('Ticket.png', 'Pattern.png')">
</div>

<div class="carousel-feature">
   <img src="promo.png" class="carousel-image" onclick="doOpen('screensaver.mp4', 'Billboard.png','Tshirt.png')">
</div>

The difference here is that your function never changes, but you call it differently each time.