Как я могу изменить изображение на основе выбора формы?

Question

Я работаю над формой, в которой пользователь должен выбрать опцию в двух отдельных формах, чтобы выбрать наиболее подходящий для него план.Обе формы имеют 3 варианта каждый.Я пытаюсь использовать Javascript, чтобы, когда пользователь выбирает один из 3 вариантов в каждой форме, общее количество меняется на 5. В зависимости от выбора в обеих формах изображение, отображающее общий итог, будет меняться.Я знаю, что это можно сделать с помощью простой функции calc и просто изменить текст, но мой клиент хочет, чтобы он сам изменил изображение вместо текста.

Это JavaScript, который я сделал до сих пор:

function priceChange()
    {
        var hostOpt = document.getElementById("host").value;
        var emailOpt = document.getElementById("email").value;
        var priceImg = new Array()
        priceImg[0] = new Image();
        priceImg[0].src = "images/total1.png";
        priceImg[1] = new Image();
        priceImg[1].src = "images/total2.png";
        priceImg[2] = new Image();
        priceImg[2].src = "images/total3.png";
        priceImg[3] = new Image();
        priceImg[3].src = "images/total4.png";
        priceImg[4] = new Image();
        priceImg[4].src = "images/total5.png";

        if (hostOpt == "opt1" && emailOpt == "opt1")
        {
            document.getElementById("priceTotal").src = priceImg[0].src;
        }
        else if (hostOpt == "opt2" && emailOpt == "opt1")
        {
            document.getElementById("priceTotal").src = priceImg[1].src;
        }
        else if (hostOpt == "opt3" && emailOpt == "opt1")
        {
            document.getElementById("priceTotal").src = priceImg[2].src;
        }
        else if (hostOpt == "opt1" && emailOpt == "opt2")
        {
            document.getElementById("priceTotal").src = priceImg[1].src;
        }
        else if (hostOpt == "opt2" && emailOpt == "opt2")
        {
            document.getElementById("priceTotal").src = priceImg[2].src;
        }
        else if (hostOpt == "opt3" && emailOpt == "opt2")
        {
            document.getElementById("priceTotal").src = priceImg[3].src;
        }
        else if (hostOpt == "opt1" && emailOpt == "opt3")
        {
            document.getElementById("priceTotal").src = priceImg[2].src;
        }
        else if (hostOpt == "opt2" && emailOpt == "opt3")
        {
            document.getElementById("priceTotal").src = priceImg[3].src;
        }
        else if (hostOpt == "opt3" && emailOpt == "opt3")
        {
            document.getElementById("priceTotal").src = priceImg[4].src;
        }
    }

Я также включил две HTML-формы ниже:

<div id="planHost" class="planOptions">
            <h5>Hosting options:</h5>
            <br/>
            <form>
                <p><input type="radio" name="host" value="opt1" id="host"/>Base</p>
                <p><input type="radio" name="host" value="opt2" id="host"/>Premium (+$5)</p>
                <p><input type="radio" name="host" value="opt3" id="host"/>Ultra (+$10)</p>
                <br/><br/>
                <input type="button" id="changeHost" name="changeHost" value="Submit" onclick="priceChange()">
            </form>
        </div>
        <div id="planEmail" class="planOptions">
            <h5>Email options:</h5>
            <br/>
            <form>
                <p><input type="radio" name="email" value="opt1" id="email"/>Base</p>
                <p><input type="radio" name="email" value="opt2" id="email"/>Premium (+$5)</p>
                <p><input type="radio" name="email" value="opt3" id="email"/>Ultra (+$10)</p>
                <br/><br/>
                <input type="button" id="changeHost" name="changeHost" value="Submit" onclick="priceChange()">
            </form>
        </div>

Когда пользователь вносит изменения в форму, необходимо изменить выбранное изображение:

ОБНОВЛЕНИЕ: Я работал над этим кодом, и он работал на всех популярных браузерах, кроме одного - Firefox.Когда я запускаю код javascript, я получаю сообщение об ошибке «priceTotal не определено». Я размещаю обновленный код, и я получаю сообщение об ошибке ниже.Спасибо за помощь, парень и Гал!

function priceChange() /*Changes the plan price and the plan details*/
    {



        for (var i=0; i<document.emailChange.email.length; i++)
        {
            if (document.emailChange.email[i].checked)
            {
                emailOpt = document.emailChange.email[i].value;
            }
        }

        for (var i=0; i<document.hostingChange.host.length; i++)
        {
            if (document.hostingChange.host[i].checked)
            {
                hostOpt = document.hostingChange.host[i].value;
            }
        }


        <!--alert("Your new total cost per month");-->
        var priceImgSrc1 = "images/total1.png";
        var priceImgSrc2 = "images/total2.png";
        var priceImgSrc3 = "images/total3.png";
        var priceImgSrc4 = "images/total4.png";
        var priceImgSrc5 = "images/total5.png";
        var emailImgSrc1 = "images/email1.png";
        var emailImgSrc2 = "images/email2.png";
        var emailImgSrc3 = "images/email3.png";
        var hostImgSrc1 = "images/host1.png";
        var hostImgSrc2 = "images/host2.png";
        var hostImgSrc3 = "images/host3.png";


        var priceTotalImg = document.getElementById("priceTotal").src;

        if (hostOpt == "Hopt1" && emailOpt == "Eopt1") {
          var priceTotal.src = priceImgSrc1;
          var hostImage.src = hostImgSrc1;
          var emailImage.src = emailImgSrc1;
        }
        else if (hostOpt == "Hopt2" && emailOpt == "Eopt1") {
          var priceTotal.src = priceImgSrc2;
          var hostImage.src = hostImgSrc2;
          var emailImage.src = emailImgSrc1;
        }
        else if (hostOpt == "Hopt3" && emailOpt == "Eopt1") {
          var priceTotal.src = priceImgSrc3;
          var hostImage.src = hostImgSrc3;
          var emailImage.src = emailImgSrc1;
        }
        else if (hostOpt == "Hopt1" && emailOpt == "Eopt2") {
          var priceTotal.src = priceImgSrc2;
          var hostImage.src = hostImgSrc1;
          var emailImage.src = emailImgSrc2;
        }
        else if (hostOpt == "Hopt2" && emailOpt == "Eopt2") {
          var priceTotal.src = priceImgSrc3;
          var hostImage.src = hostImgSrc2;
          var emailImage.src = emailImgSrc2;
        }
        else if (hostOpt == "Hopt3" && emailOpt == "Eopt2") {
          var priceTotal.src = priceImgSrc4;
          var hostImage.src = hostImgSrc3;
          var emailImage.src = emailImgSrc2;
        }
        else if (hostOpt == "Hopt1" && emailOpt == "Eopt3") {
          var priceTotal.src = priceImgSrc3;
          var hostImage.src = hostImgSrc1;
          var emailImage.src = emailImgSrc3;
        }
        else if (hostOpt == "Hopt2" && emailOpt == "Eopt3") {
          var priceTotal.src = priceImgSrc4;
          var hostImage.src = hostImgSrc2;
          var emailImage.src = emailImgSrc3;  
        }
        else if (hostOpt == "Hopt3" && emailOpt == "Eopt3") {
          var priceTotal.src = priceImgSrc5;
          var hostImage.src = hostImgSrc3;
          var emailImage.src = emailImgSrc3;
        }

    }

Answer 1

Проблема в том, как вы получаете значения от своих переключателей.Код, который вы сейчас имеете, всегда будет возвращать один и тот же результат (т. Е. Opt1 для обеих радиогрупп).Чтобы получить выбранные значения, вам нужно написать простую функцию JavaScript, например:

function getSelectedOption(radiogroup) {
  if (!radiogroup) return "";

  for(var i = 0; i < radiogroup.length; i++) {
    if(radiogroup[i].checked) return radiogroup[i].value;
  }

  return "";
}

Вот несколько советов:

1. Дайте каждой форме идентификатор.
2. Напишите простую функцию для получения значений группы переключателей (как в приведенном выше примере).
3. Вызовите эту функцию из текущей функции priceChange ().

Воткак будет выглядеть ваш обновленный JavaScript:

function getSelectedOption(radiogroup) {
  if (!radiogroup) return "";


  for(var i = 0; i < radiogroup.length; i++) {
    if(radiogroup[i].checked) {
      return radiogroup[i].value;
    }
  }

  return "";
}

function priceChange() {
    var hostOpt = getSelectedOption(document.getElementById('planHostForm').elements['host']);
    var emailOpt = getSelectedOption(document.getElementById('emailForm').elements['email']);

    var priceImgSrc1 = "images/total1.png";
    var priceImgSrc2 = "images/total2.png";
    var priceImgSrc3 = "images/total3.png";
    var priceImgSrc4 = "images/total4.png";
    var priceImgSrc5 = "images/total5.png";

    var priceTotalImg = document.getElementById("priceTotal");

    if (hostOpt == "opt1" && emailOpt == "opt1") {
      priceTotalImg.src = priceImgSrc1;
    }
    else if (hostOpt == "opt2" && emailOpt == "opt1") {
      priceTotalImg.src = priceImgSrc2;
    }
    else if (hostOpt == "opt3" && emailOpt == "opt1") {
      priceTotalImg.src = priceImgSrc3;
    }
    else if (hostOpt == "opt1" && emailOpt == "opt2") {
      priceTotalImg.src = priceImgSrc2;
    }
    else if (hostOpt == "opt2" && emailOpt == "opt2") {
      priceTotalImg.src = priceImgSrc3;
    }
    else if (hostOpt == "opt3" && emailOpt == "opt2") {
      priceTotalImg.src = priceImgSrc4;
    }
    else if (hostOpt == "opt1" && emailOpt == "opt3") {
      priceTotalImg.src = priceImgSrc3;
    }
    else if (hostOpt == "opt2" && emailOpt == "opt3") {
      priceTotalImg.src = priceImgSrc4;
    }
    else if (hostOpt == "opt3" && emailOpt == "opt3") {
      priceTotalImg.src = priceImgSrc5;
    }
}

Обратите внимание на эти две строки:

var hostOpt = getSelectedOption(document.getElementById('planHostForm').elements['host']);
var emailOpt = getSelectedOption(document.getElementById('emailForm').elements['email']);

Эти строки вызывают функцию, которая получит выбранное значение из групп переключателей (при условии, чтовы даете своим формам идентификаторы planHostForm и emailForm.

Есть также несколько других изменений, таких как объявление переменных для путей src и изображения, которое вы хотите изменить;Ваш код будет легче читать и поддерживать.

Вот обновленный HTML-код (с добавленными идентификаторами форм и обновленными идентификаторами переключателей):

<div id="planHost" class="planOptions">
            <h5>Hosting options:</h5>
            <br/>
            <form id="planHostForm">
                <p><input type="radio" name="host" value="opt1" id="host1"/>Base</p>
                <p><input type="radio" name="host" value="opt2" id="host2"/>Premium (+$5)</p>
                <p><input type="radio" name="host" value="opt3" id="host3"/>Ultra (+$10)</p>
                <br/><br/>
                <input type="button" id="changeHost" name="changeHost" value="Submit" onclick="priceChange()">
            </form>
        </div>

  <div id="planEmail" class="planOptions">
            <h5>Email options:</h5>
            <br/>
            <form id="emailForm">
                <p><input type="radio" name="email" value="opt1" id="email1"/>Base</p>
                <p><input type="radio" name="email" value="opt2" id="email2"/>Premium (+$5)</p>
                <p><input type="radio" name="email" value="opt3" id="email3"/>Ultra (+$10)</p>
                <br/><br/>
                <input type="button" id="changeHost" name="changeHost" value="Submit" onclick="priceChange()">
            </form>
        </div>

Answer 2

Чтобы исправить вашу последнюю ошибку "priceTotal.src не определен", вам нужно изменить код, чтобы он ссылался на правильные переменные

Например, у вас есть:

   var priceTotalImg = document.getElementById("priceTotal").src;

    if (hostOpt == "Hopt1" && emailOpt == "Eopt1") {
      var priceTotal.src = priceImgSrc1;
      var hostImage.src = hostImgSrc1;
      var emailImage.src = emailImgSrc1;
    }

Я думаю, вы хотели изменить атрибут src для объекта изображения. Если это так, то вам нужно будет обновить свой код следующим образом:

   var priceTotalImg = document.getElementById("priceTotal").src;

    if (hostOpt == "Hopt1" && emailOpt == "Eopt1") {
      priceTotalImg.src = priceImgSrc1;
      hostImage.src = hostImgSrc1;
      emailImage.src = emailImgSrc1;
    }

Обратите внимание, что hostImage и emailImage нужно будет объявить где-то перед условными блоками. Я не уверен, как теперь выглядит ваш HTML, но вы бы объявили эти переменные аналогично priceTotalImg. Например:

var hostImage = document.getElementById("hostImage").src;
var emailImage = document.getElementById("emailImage").src;

Answer 3

Хорошо, я наконец-то обнаружил ошибку, из-за которой он не работал. Я не передавал значение обратно в форму, поэтому для простоты я полностью удалил переменную и передал значение непосредственно обратно в форму. Это работает как шарм. Спасибо, парень, за твою помощь. Я думаю, я слишком усложнил себя.

Answer 4

Вы уверены, что запускаете priceChange() для запуска?Я не уверен, как следить за изменением значения элемента select в сыром JS, но если бы вы использовали jQuery, вы бы включили слушатель в событие «change» входов и настроили его для запуска вашей функции, например так:

$ ('input [name = "host"], input [name = "email"]'). Change (function () {priceChange ();});