Форум

Navilsor · #1 (**permalink**) 15.01.2015, 18:14

Добрый день! При выборе select у меня меняется картинка. Так как select может передавать только одну переменную value в скрипт, мне нужно сделать зависимость. То есть выбрали select'ом картинку, скрипт перевел выбранную картинку в переменную и вывел на страницу цифру соответствующую конкретной картинке. Подскажите пожалуйста как реализовать?
P.S. Например: переменная картинка 1 = переменная =5900

<script language="JavaScript">
<!--
 function changeImage(form) {
 selection = form.imagename.options[form.imagename.selectedIndex].value; document.images['pic'].src = selection;
 var price = 5900
 document.getElementById('mydiv').innerHTML = price;
 }
//-->
</script>

<form>

 <img name="pic" src="images\1.jpg" alt=""></br>

 <select size=1 name="imagename" onChange="changeImage(this.form)" id="price">

 <option value="images\1.jpg">Картинка 1</option>

 <option value="images\2.jpg">Картинка 2</option>

 <option value="images\3.jpg">Картинка 3</option>

 </select>
<div id="mydiv">0</div>

</form>

рони · #2 (**permalink**) 15.01.2015, 19:04

Navilsor, собери пазл
var base = { 0 : {src : "images\1.jpg", price : 5900}}
<option value="0">Картинка 1</option>
onChange="changeImage(this.value)"
document.images['pic'].src = base[form].src
document.getElementById('mydiv').innerHTML = base[form].price

Navilsor · #3 (**permalink**) 17.01.2015, 19:15

Собрал, не работает

<script language="JavaScript">
<!--
 var base = { 1 : {src : "images\1.jpg", price : 5900}}
 var base = { 2 : {src : "images\2.jpg", price : 6900}}
 var base = { 3 : {src : "images\3.jpg", price : 7900}}	
 
 function changeImage(value) {
   
 selection = form.imagename.options[form.imagename.selectedIndex].value;

 document.images['pic'].src = base[form].src
 
 document.getElementById('mydiv').innerHTML = base[form].price

 }
//-->
</script>

<form>

 <img name="pic" src="images\1.jpg" alt=""></br>

 <select size=1 name="imagename" onChange="changeImage(this.value)" id="price">

 <option value="1">Картинка 1</option>

 <option value="2">Картинка 2</option>

 <option value="3">Картинка 3</option>

 </select>
 
<div id="mydiv">0</div>

</form>

рони · #4 (**permalink**) 17.01.2015, 19:20

Navilsor,
9 строка лишняя и если вы в 7 строке сделали другое название параметра то и в строке 11 и 13 тоже самое должно быть

Navilsor · #5 (**permalink**) 17.01.2015, 19:50

рони,
Тогда берётся только одно последнее значение base.

<script language="JavaScript">
<!--
 var base = { 1 : {src : "images\1.jpg", price : 5900}}
 var base = { 2 : {src : "images\2.jpg", price : 6900}}
 var base = { 3 : {src : "images\3.jpg", price : 7900}}	
 function changeImage(form) {
 document.images['pic'].src = base[form].src
 document.getElementById('mydiv').innerHTML = base[form].price
 }
//-->
</script>

<form>
<img name="pic" src="images\1.jpg" alt=""></br>
<select size=1 name="imagename" onChange="changeImage(this.value)" id="price">
 <option value="0">Выбрать</option>
 <option value="1">Картинка 1</option>
 <option value="2">Картинка 2</option>
 <option value="3">Картинка 3</option>
 </select>
<div id="mydiv">0</div>
</form>

Navilsor · #6 (**permalink**) 17.01.2015, 19:54

Переменную прописал правильно, но картинки не отображаются

var base = { 1 : {src : "images\1.jpg", price : 5900}, 2 : {src : "images\2.jpg", price : 6900}}

рони · #7 (**permalink**) 17.01.2015, 20:31

Navilsor,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>

  var base = {
     1: {
         src: "http://javascript.ru/forum/images/smilies/victory.gif",
         price: 5900
     },
     2: {
         src: "http://javascript.ru/forum/images/smilies/dance3.gif",
         price: 6900
     },
     3: {
         src: "http://javascript.ru/forum/images/smilies/cray.gif",
         price: 7900
     }
 };

 function changeImage(form) {
     document.images["pic"].src = base[form.value].src;
     document.getElementById("mydiv").innerHTML = base[form.value].price;
     form.value = 0
 };

</script>
</head>

<body>


<form>
<img name="pic" src="http://javascript.ru/forum/images/smilies/victory.gif" alt=""></br>
<select size=1 name="imagename" onChange="changeImage(this)" id="price">
 <option value="0">Выбрать</option>
 <option value="1">Картинка 1</option>
 <option value="2">Картинка 2</option>
 <option value="3">Картинка 3</option>
 </select>
<div id="mydiv">5900</div>
</form>

</body>

</html>

registrant · #8 (**permalink**) 17.01.2015, 21:16

<html>
 
<head>
</head>
 
<body>


 
<form>
<img name="pic" src="http://icons.iconarchive.com/icons/guillendesign/variations-3/256/Default-Icon-icon.png" /></br>
<select onChange="changeImage(this.value)">
 <option value="http://icons.iconarchive.com/icons/guillendesign/variations-3/256/Default-Icon-icon.png 0">Выбрать</option>
 <option value="http://javascript.ru/forum/image.php?u=39914&dateline=1421334989 5900">Картинка 1</option>
 <option value="http://javascript.ru/forum/image.php?u=7416&dateline=1372796129 6900">Картинка 2</option>
 <option value="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif 7900">Картинка 3</option>
 </select>
<div id="mydiv">0</div>
</form>


<script>

d=document.getElementById('mydiv')
 function changeImage(value) {
 document.images['pic'].src=value.split(" ")[0]
 d.innerHTML = value.split(" ")[1]
 }
</script>

</body>
 
</html>

Vlasenko Fedor · #9 (**permalink**) 17.01.2015, 23:11

<img id="pic" src="http://icons.iconarchive.com/icons/guillendesign/variations-3/256/Default-Icon-icon.png"
/>
<br>
<select id="changeImage">
  <option value="0" data-img="http://icons.iconarchive.com/icons/guillendesign/variations-3/256/Default-Icon-icon.png">Выбрать</option>
  <option value="5900" data-img="http://javascript.ru/forum/image.php?u=39914&dateline=1421334989">Картинка 1</option>
  <option value="6900" data-img="http://javascript.ru/forum/image.php?u=7416&dateline=1372796129">Картинка 2</option>
  <option value="7900" data-img="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">Картинка 3</option>
</select>
<div id="mydiv">0</div>
<script>
  window.onload = function () {
    changeImage.onchange = function () {
      this.selected = this.options[this.selectedIndex];
      pic.src = this.selected.getAttribute('data-img');
      mydiv.innerHTML = this.selected.value;
    };
  };
</script>

еще вариантик

Navilsor · #10 (**permalink**) 22.01.2015, 08:01

И еще вопрос, можно ли потом вызвать переменную mydiv и перемножить её с другой переменной?

function calc() { 
var type = document.getElementById("type"); 
var mydiv = document.getElementById("mydiv");
myprice += parseInt(type.value*mydiv.value);
pricex = myprice;
result.innerHTML = pricex;

Вылетает NaN почему-то...

Форум

Справочник

Discord чат

Курсы javascript