Javascript-форум - Переменная и select

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Переменная и select (https://javascript.ru/forum/dom-window/52978-peremennaya-i-select.html)

Navilsor

15.01.2015 18:14

Переменная и select

Добрый день! При выборе 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>

рони	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

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>

рони	17.01.2015 19:20

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

Navilsor

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

17.01.2015 19:54

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

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

рони	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

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

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

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 почему-то...

рони	22.01.2015 10:40

Navilsor,
трудно судить по обрывку кода, делайте полноценный макет как в примерах выше

Navilsor

22.01.2015 11:21

Вот:

<!DOCTYPE HTML>

<html>

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

 var base = { 1 : {src : "images/picture1.jpg", price : 5900}, 2 : {src : "images/picture2.jpg", price : 6900}, 3 : {src : "images/picture2.jpg", price : 7900}};

 function changeImage(form) {
     document.images["pic"].src = base[form.value].src;
     document.getElementById("mydiv").innerHTML = base[form.value].price;
     form.value = 0
 };
 
 function calc() { 
 
 var type_widht = document.getElementById("type_widht"); 
 var type_height = document.getElementById("type_height");
 var type_area = document.getElementById("type_area");
 var type_money = document.getElementById("type_money");
 var type_mydiv = document.getElementById("mydiv");

 var result = document.getElementById("result_widht"); 
 var result = document.getElementById("result_height");
 var result = document.getElementById("result_area");
 var result = document.getElementById("result_money");
 var result = document.getElementById("result");
 
 var price_widht = 0;
 var price_height = 0; 
 var price_area = 0; 
 var price_money = 0;
 var pricex = 0;
 
 price_widht += parseInt(type_widht.value);
 price_height += parseInt(type_height.value);
 
 price_area += parseInt(type_widht.value*type_height.value)/1000000;
 
 price_money += parseInt(type_widht.value*type_height.value*type_mydiv.value)/1000;
 
 pricex = price_area;
 
 result_area.innerHTML = price_area; 
 
 result_money.innerHTML = price_money; 
 
 result.innerHTML = pricex;
 
  };

</script>

</head>

<body>

<form>
<table>
<tr>
<td width="200"></td>
<td><img name="pic" src="images/picture1.jpg" alt=""></td>
</tr>
<tr>
<td width="200">Укажите Параметр:</td>
<td width="200"><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>
 </td>
 <td width="200"><span id="mydiv">0</span> Ед.изм.</td>
</tr> 

<tr>
<td width="200"></td>
</tr> 

</table>
 
</form>

<table>

<tr>
 <td width="200">Укажите значение widht:</td>
 <td width="100"><input type="text" id="type_widht" value="0" onchange="calc()" /></td>
 <td width="200">Результат деления на миллион:<span id="result_area">0</span> Ед.изм.</td>
</tr>
 
 <tr>
 <td width="200">Укажите значение height:</td>
 <td width="100"><input type="text" id="type_height" value="0" onchange="calc()" /></td>
 <td width="200">Результат деления на тысячу:<span id="result_money">0</span> Ед.изм.</td>
 </tr>

 <tr style="background-color:#eeeeee;border:1px solid #c6c6c6">
 <td width="200" class="td_result">ИТОГО:</td>

 <td width="100"></td>
 <td class="td_result"><span id="result">0</span> Ед.изм.</td>
 </tr>
</table>

</body>

</html>

рони	22.01.2015 11:45

Цитата:

Сообщение от Navilsor

var result = document.getElementById("result_widht");
var result = document.getElementById("result_height");
var result = document.getElementById("result_area");
var result = document.getElementById("result_money");
var result = document.getElementById("result");

это какой-то праздник!!! в результате только последняя строка значима

рони	22.01.2015 11:51

Цитата:

Сообщение от Navilsor

price_money += parseInt(type_widht.value*type_height.value*type_mydiv.value)/1000;

нету value у div -- а есть что-то иное

Navilsor

22.01.2015 18:28

Что-то я не дружу с dataset. Подскажите плиз?

var dollar = $(selector).data('myValue');

<div id="mydiv" data-my-value="mydiv">0</div>

рони	22.01.2015 18:44

Navilsor,
вы не это ищите?

document.getElementById("mydiv").innerHTML

по дата
http://learn.javascript.ru/dataset-api

Navilsor

23.01.2015 08:22

Беру переменную. и опять NaN

var type_mydiv = document.getElementById("mydiv").innerHTML;

рони	23.01.2015 09:28

Navilsor,
:-? строка 40

<!DOCTYPE HTML>

<html>

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

 var base = { 1 : {src : "images/picture1.jpg", price : 5900}, 2 : {src : "images/picture2.jpg", price : 6900}, 3 : {src : "images/picture2.jpg", price : 7900}};

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

 function calc() {

 var type_widht = document.getElementById("type_widht");
 var type_height = document.getElementById("type_height");
 var type_area = document.getElementById("type_area");
 var type_money = document.getElementById("type_money");
 var type_mydiv = document.getElementById("mydiv");


 var result = document.getElementById("result");

 var price_widht = 0;
 var price_height = 0;
 var price_area = 0;
 var price_money = 0;
 var pricex = 0;

 price_widht += parseInt(type_widht.value)||0;
 price_height += parseInt(type_height.value)||0;

 price_area += parseInt(type_widht.value*type_height.value)/1000000;

 price_money += parseInt(type_widht.value*type_height.value*type_mydiv.innerHTML)/1000;

 pricex = price_area;

 result_area.innerHTML = price_area;

 result_money.innerHTML = price_money;

 result.innerHTML = pricex;

  };

</script>

</head>

<body>

<form>
<table>
<tr>
<td width="200"></td>
<td><img name="pic" src="images/picture1.jpg" alt=""></td>
</tr>
<tr>
<td width="200">Укажите Параметр:</td>
<td width="200"><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>
 </td>
 <td width="200"><span id="mydiv">0</span> Ед.изм.</td>
</tr>

<tr>
<td width="200"></td>
</tr>

</table>

</form>

<table>

<tr>
 <td width="200">Укажите значение widht:</td>
 <td width="100"><input type="text" id="type_widht" value="0" onchange="calc()" /></td>
 <td width="200">Результат деления на миллион:<span id="result_area">0</span> Ед.изм.</td>
</tr>

 <tr>
 <td width="200">Укажите значение height:</td>
 <td width="100"><input type="text" id="type_height" value="0" onchange="calc()" /></td>
 <td width="200">Результат деления на тысячу:<span id="result_money">0</span> Ед.изм.</td>
 </tr>

 <tr style="background-color:#eeeeee;border:1px solid #c6c6c6">
 <td width="200" class="td_result">ИТОГО:</td>

 <td width="100"></td>
 <td class="td_result"><span id="result">0</span> Ед.изм.</td>
 </tr>
</table>

</body>

</html>

Часовой пояс GMT +3, время: 18:07.