---
title: "Problem med js kod"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/191657-problem-med-js-kod"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Asa"
published: "2013-08-17T07:09:38.000Z"
updated: "2013-08-17T09:18:37.000Z"
replies: 11
views: 897
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/191657-problem-med-js-kod"
---

# Problem med js kod

## #1 — Asa, 2013-08-17T07:09Z

Har följande kod som funkar bra. 

```
<img id="imageToSwap" src="bild1.jpg" />

<br/><br/>

<select id="dd" onChange="swapImage()">
<option value="bild1.jpg">bild1.jpg</option>
<option value="bild2.jpg">bild2.jpg</option>
<option value="bild3.jpg">bild3.jpg</option>
</select>

<script type="text/javascript">
function swapImage(){
	var image = document.getElementById("imageToSwap");
	var dropd = document.getElementById("dd");
	image.src = dropd.value;	
};
</script>
```

Nu är det så att jag vill att denna kod skall funka så att min huvudbild ligger i en \<ul\>\<li\>HÄR\</li\>\</ul\> och jag kommer ha två värden i selectboxen så det måste splittas på nåt vis. Färg;Bild - Hur skall jag skriva då?!

Koden:

```
<ul>
	<li><img id="imageToSwap" src="bild1.jpg" /></li>
</ul>

<br/><br/>

<select id="dd" onChange="swapImage()">
<option value="Vit;bild1.jpg">Vit</option>
<option value="Blå;bild2.jpg">Blå</option>
<option value="Grön;bild3.jpg">Grön</option>
</select>

<script type="text/javascript">
function swapImage(){
	var image = document.getElementById("imageToSwap");
	var dropd = document.getElementById("dd");
	image.src = dropd.value;	
};
</script>
```

Sen nästa problem:
Får inte detta att funka med följande bild slide:
<http://amazingslider.com/examples/jquery-image-and-video-gallery-with-thumbnails/>

Permalänk: https://www.webforum.nu/p/191657

## #2 — voigtann1, 2013-08-17T07:25Z

dropd.value är en sträng, splitar på ";":

```
function swapImage(){
  var image = document.getElementById("imageToSwap");
  var dropd = document.getElementById("dd");
  var values = dropd.value.split(";");
  image.src = values[1];	
  alert(values[0]);
}
```

jquery plugin kör du nog när DOM trädet är redo och det är den DOM strukturen den kommer köra, vad försöker du göra med jquery pluginet?

Permalänk: https://www.webforum.nu/p/2313560

## #3 — Asa, 2013-08-17T07:31Z

Tackar för det :) Funkade fint! Nu till steg 2.
Bifogar filerna. Det får jag inte till alls att funka med amazing slider.

Bilagor:

- [slider.zip](https://www.webforum.nu/a/23587.zip)

Permalänk: https://www.webforum.nu/p/2313561

## #4 — Asa, 2013-08-17T07:40Z

Nej här är rätt kod för sidan. Visa källan så ser ni:
<http://www.textiltema.se/test.html>

Här är det utan slide grejjen
<http://www.textiltema.se/test_utan.html>

Permalänk: https://www.webforum.nu/p/2313562

## #5 — voigtann1, 2013-08-17T08:48Z

vad du vill egentligen göra (gissar jag) är att använda sliderns bilder dvs triggar plugin:ets element?

Permalänk: https://www.webforum.nu/p/2313564

## #6 — Asa, 2013-08-17T08:51Z

Jag vill först och främst använda deras bildvisare med thums under som funkar som det gör på sidan. Sen vill jag ha in selectboxen så att stora bilden byts ut vid onchange i listan.

Jag är kass på javascript språk :/ Men hoppas du blev klokare?

Permalänk: https://www.webforum.nu/p/2313565

## #7 — voigtann1, 2013-08-17T08:52Z

typ:

```
$("#dd").on("change", function() {
	$(".amazingslider-bullet-wrapper-0").children().eq(this.selectedIndex).trigger("click");
});
```

(jQuery \< 1.7):

```
$("#dd").bind("change", function() {
	$(".amazingslider-bullet-wrapper-0").children().eq(this.selectedIndex).trigger("click");
});
```

?

Permalänk: https://www.webforum.nu/p/2313566

## #8 — Asa, 2013-08-17T08:53Z

Är säkert rätt men hur funkar det då? Var skall koden in då?

Permalänk: https://www.webforum.nu/p/2313567

## #9 — voigtann1, 2013-08-17T08:54Z

efter plugin:et har körts

du kör v1.6.4 av jQuery så då få du byta ut "on" till "bind"

Permalänk: https://www.webforum.nu/p/2313568

## #10 — Asa, 2013-08-17T09:00Z

Supertack! Verkar fungera finfint :) Så tur ni finns som kan!

Permalänk: https://www.webforum.nu/p/2313569

## #11 — Asa, 2013-08-17T09:15Z

Om jag lägger till en option i selectlisten med ex Välj färg så felar det och visas fel. Den tror att den första alltså är ett val och det vill jag inte. Hur gör jag då?

```
	<select id="dd" onChange="swapImage()">
		<option value=""> - Välj färg - </option>
		<option value="Vit;items/350/produktID_183.jpg">Vit</option>
		<option value="Grön;items/350/produktID_183_extra_371.jpg">Grön</option>
		<option value="Blå;items/350/produktID_183_extra_372.jpg">Blå</option>
		<option value="Röd;items/350/produktID_183_extra_373.jpg">Röd</option>		
	</select>
```

Permalänk: https://www.webforum.nu/p/2313570

## #12 — Asa, 2013-08-17T09:18Z

Jag testa själv och manskulle skriva -1 efter this.selectedIndex i denna koden märkte jag. Då funkade det :)

```
$("#dd").bind("change", function() {
	$(".amazingslider-bullet-wrapper-0").children().eq(this.selectedIndex-1).trigger("click");
});
```

Permalänk: https://www.webforum.nu/p/2313571

---

Tråden på webben: https://www.webforum.nu/amne/javascript/191657-problem-med-js-kod