Форум

gloomer88 · #1 (**permalink**) 13.11.2014, 16:39

Доброго времени суток!

Я не программист, но задачу нужно выполнить, по этому прошу у вас помощи, частично что нужно уже нарыл, но доконца правильно сделать не получается.

Нужно что бы при выборе radiobutton в форме, менялась картинка.
всего есть 6 картинок отличаются они по цвету и по типу.

картинка

цвет
1) желтый
2)фиолетовый
3)синий

форма
а)тип1
б)тип2

Нужно чтобы при выборе желтого цвета и формы тип1, показало картинку тип1 желтая. ну и т.д.

<html>
<head>
<script type="text/javascript">
function imgchange(tag) {
                if (tag == 'jelt') {
                    document.getElementById('kartinka').src = "img/pf1ys-150x150.jpg";
                }
                else if (tag == 'fio') {
                    document.getElementById('kartinka').src = "img/pf1ps-150x150.jpg";
                } 
                else if (tag == 'sin') {
                    document.getElementById('kartinka').src = "img/pf1bs-150x150.jpg";
                } 
                
            }
</script>      

  
</head>
<body>  

      <form class="s_form" action="index1.php" method="POST">
      	цвет
      	<input type="radio" name="color" checked="checked" value="jelt" onclick="imgchange(this.value);" />желтый
        <input type="radio" name="color" value="fio"  onclick="imgchange(this.value);" />фиолетовый
        <input type="radio" name="color" value="sin"  onclick="imgchange(this.value);" />синий
        тип
        <input type="radio" name="tip" value="t1" onclick="imgchange(this.value);" />тип1
        <input type="radio" name="tip" value="t2" checked="checked" onclick="imgchange(this.value);" />тип2
        <input class="s_submit" type="button" value="отправить">
      </form>


<img id="kartinka" src="img/pf1ys-150x150.jpg">

  </body>
</html>

То что вышло у меня меняет картинку по параметру цвет, как туда дописать еще и условие типа?

Подскажите пожалуйста

ksa · #2 (**permalink**) 14.11.2014, 09:29

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

Я не программист, но задачу нужно выполнить

Интересно... Кто дает такие задания "непрограммистам"?

gloomer88 · #3 (**permalink**) 14.11.2014, 09:38

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

Интересно... Кто дает такие задания "непрограммистам"?

Лучше бы по теме подсказали((

рони · #4 (**permalink**) 14.11.2014, 10:41

gloomer88,

<!DOCTYPE HTML>

<html>

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

<body>
<script>
   function imgchange()
   {
     var tip =  document.querySelector('[name="tip"]:checked').value,
         color = document.querySelector('[name="color"]:checked').value
         srcAll = {'t1': {'jelt' : '1', 'fio' : '2', 'sin': '3'}, 't2': {'jelt' : '4', 'fio' : '5', 'sin': '6'}};
         alert(srcAll[tip][color])
   };

</script>
<form class="s_form" action="index1.php" method="POST" name="s_form"  onchange="imgchange()">
      	цвет
      	<input type="radio" name="color" checked="checked" value="jelt"  />желтый
        <input type="radio" name="color" value="fio"   />фиолетовый
        <input type="radio" name="color" value="sin"   />синий
        тип
        <input type="radio" name="tip" value="t1"  />тип1
        <input type="radio" name="tip" value="t2" checked="checked"  />тип2
        <input class="s_submit" type="button" value="отправить">
      </form>

</body>

</html>

gloomer88 · #5 (**permalink**) 14.11.2014, 12:17

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

gloomer88,

<!DOCTYPE HTML>

<html>

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

<body>
<script>
   function imgchange()
   {
     var tip =  document.querySelector('[name="tip"]:checked').value,
         color = document.querySelector('[name="color"]:checked').value
         srcAll = {'t1': {'jelt' : '1', 'fio' : '2', 'sin': '3'}, 't2': {'jelt' : '4', 'fio' : '5', 'sin': '6'}};
         alert(srcAll[tip][color])
   };

</script>
<form class="s_form" action="index1.php" method="POST" name="s_form"  onchange="imgchange()">
      	цвет
      	<input type="radio" name="color" checked="checked" value="jelt"  />желтый
        <input type="radio" name="color" value="fio"   />фиолетовый
        <input type="radio" name="color" value="sin"   />синий
        тип
        <input type="radio" name="tip" value="t1"  />тип1
        <input type="radio" name="tip" value="t2" checked="checked"  />тип2
        <input class="s_submit" type="button" value="отправить">
      </form>

</body>

</html>

Спасибо, только как теперь это применить к картинке а не к аллерту?

рони · #6 (**permalink**) 14.11.2014, 12:25

gloomer88,
прописать вместо цифр в строке 16 ваши src
и заменить алерт на вашу строку 6 (почти) и всё
ну и тег картинки добавить

gloomer88 · #7 (**permalink**) 14.11.2014, 12:42

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

gloomer88,
прописать вместо цифр в строке 16 ваши src
и заменить алерт на вашу строку 6 (почти) и всё
ну и тег картинки добавить

Если не трудно можно в виде кода? а то что-то ничего не работает у меня

рони · #8 (**permalink**) 14.11.2014, 12:55

gloomer88,
строку 16 набейте какими-нибудь но существующими путями на картинки и сюда сбросьте

gloomer88 · #9 (**permalink**) 14.11.2014, 13:00

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

gloomer88,
строку 16 набейте какими-нибудь но существующими путями на картинки и сюда сбросьте

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

srcAll = {'t1': {'jelt' : 'img/pf1ys-150x150.jpg', 'fio' : 'img/pf1ps-150x150.jpg', 'sin': 'img/pf1bs-150x150.jpg'}, 't2': {'jelt' : 'img/pf1bs-150x151.jpg', 'fio' : 'img/pf1bs-150x152.jpg', 'sin': 'img/pf1bs-150x153.jpg'}};
         
document.getElementById('kartinka').src = "srcAll[tip][color]";

рони · #10 (**permalink**) 14.11.2014, 13:10

gloomer88,

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

существующими путями

а эти пути видите только вы
ок
уберите двойные кавычки и будет вам счастье

Форум

Справочник

Discord чат

Курсы javascript