Question

我正在制作一个表单，用户必须在两个单独的表单中选择一个选项才能选择最适合他的计划。两种形式各有3个选项。我正在尝试使用Javascript，以便当用户选择每个表单上的3个选项之一时，总更改为5.根据两个表单上的选项，显示总计的图像将更改。我知道可以通过一个简单的计算功能来完成这个，只需更改文本，但我的客户希望它改变图像而不是文本。

这是我到目前为止所做的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>

当用户在表单上进行更改时，所选图像需要更改： alt text

更新我一直在研究这个代码，我让它在所有流行的浏览器上工作，但只有一个 - Firefox。当我运行javascript代码时，我收到错误“priceTotal未定义。”我将更新的代码和错误放在下面。感谢帮助人和gal的！

alt text

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 "";
}

以下是一些建议：

为每个表单提供一个ID。
编写一个简单的函数来获取单选按钮组值（如上例所示）。
从当前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'ID）。

还有一些其他更改，例如声明src路径的变量和您希望更改的图像;您的代码将更易于阅读和维护。

这是更新的HTML（添加了表单ID并更新了单选按钮ID）：

<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

您确定要触发priceChange()运行吗？我不确定如何在原始JS中观察select元素值的变化，但是如果你使用jQuery，你会在输入'“change”事件中设置一个监听器并将其设置为运行你的函数，就像这样：

$（ '输入[名称= “宿主”]，输入[名称= “电子邮件”]'）变化（函数（）{priceChange（）;}）;

Answer 4

好的，我终于找到了让它失败的错误。我没有将值传递回表单，所以为了简单起见，我完全删除了变量并将值直接传递回表单。它的工作就像一个魅力。谢谢你的帮助。我想我过度复杂了。

如何根据表单选择更改图像？

4 个答案: