Question

我有以下代码。

JS：

function generateLink()
{
  var car = document.getElementById('cars').value;
  var year = document.getElementById('years').value;

  if(car  == "fiat" || car == "honda" || car == "mitsu" || car == "acura" || car == "ford")
        document.ref.action ='http://' + year + '.' + car + '.domain.net';
  else if(car == "audi" || car == "volvo" || car == "mazda" || car == "nissan" || car == "porsche" || car == "wholesale")
        document.ref.action ='http://' + year + '.' + car + '.domain.net/Sales.jsp';
  else if(car == "BMW")
        document.ref.action ='http://' + year + '.' + car + '.domain.net/container.jsp';
  else
        document.ref.action ='/error-pages/404.html';
  return true;
}

function showLink()
{
document.getElementById("years").innerHTML = "Link: " + generateLink();
}

** HTML：

<h1>Ref</h1>
<form name="ref" onsubmit="return generateLink();" target="_blank">

<div style="margin: 0 auto; width:500px;">

  <div style="float:left;"><span>PICK A CAR</span><br>
    <select id="cars">
     …
    </select>
  </div>

  <div style="float:right;"><span>PICK A YEAR</span><br>
    <select id="years" onchange="showLink()">
    …
    </select>
  </div>

  <div style="float:left; margin-left:190px; margin-right: 40px; margin-top:70px;">
    <a href=generateLink() id="link"></a>
    <input type="submit" value="Go to Site"><br><br>
    <input type="reset" value="Reset Selection">
  </div>

 ...

我想要做的是在用户更改submit字段后，在years按钮上方输出生成的链接。理想情况下，我希望仅在第一个字段cars也被更改时生成它，但我不知道如何做到这一点并且现在至关重要。我知道我应该使用onchange，但我不确定如何让它实际输出generateLink函数的链接。

修改

我可以使用以下函数输出它，并在提交按钮上方添加id link。该链接显示但我不确定如何根据选择使href地址准确无误。

function showLink()
{
  var car = document.getElementById('cars').value;
  var year = document.getElementById('years').value;

  if(car  == "fiat" || car == "honda" || car == "mitsu" || car == "acura" || car == "ford")
        document.getElementById("link").innerHTML ='http://' + year + '.' + car + '.domain.net';
  else if(car == "audi" || car == "volvo" || car == "mazda" || car == "nissan" || car == "porsche" || car == "wholesale")
        document.getElementById("link").innerHTML ='http://' + year + '.' + car + '.domain.net/Sales.jsp';
  else if(car == "BMW")
        document.getElementById("link").innerHTML ='http://' + year + '.' + car + '.domain.net/container.jsp';
  else
        document.getElementById("link").innerHTML ='/error-pages/404.html';
}

Answer 1

您应该将生成的链接应用于以下#link元素：

function showLink()
{
  var link = generateLink();

  document.getElementById("link").href = link;
  document.getElementById("link").innerHTML = link;
}

希望这有帮助。

＆＃13;

function generateLink()
{
  var car = document.getElementById('cars').value;
  var year = document.getElementById('years').value;

  if(car  == "fiat" || car == "honda" || car == "mitsu" || car == "acura" || car == "ford")
    link ='http://' + year + '.' + car + '.domain.net';
  else if(car == "audi" || car == "volvo" || car == "mazda" || car == "nissan" || car == "porsche" || car == "wholesale")
    link ='http://' + year + '.' + car + '.domain.net/Sales.jsp';
  else if(car == "BMW")
    link ='http://' + year + '.' + car + '.domain.net/container.jsp';
  else
    link ='/error-pages/404.html';

  return link;
}

function showLink()
{
  var link = generateLink();
  
  document.getElementById("link").href = link;
  document.getElementById("link").innerHTML = link;
}

document.ref.onsubmit = function(){
    this.action = generateLink();
}

＆＃13;

<h1>Ref</h1>
<form name="ref" target="_blank">

  <div style="margin: 0 auto; width:500px;">

    <div style="float:left;"><span>PICK A CAR</span><br>
      <select id="cars" onchange="showLink()">
        <option value="acura">Acura</option>
        <option value="wholesale">Wholesale</option>
        <option value="BMW">BMW</option>
        <option value="other">Other</option>
      </select>
    </div>

    <div style="float:right;"><span>PICK A YEAR</span><br>
      <select id="years" onchange="showLink()">
        <option value="2016">2016</option>
        <option value="2015">2015</option>
        <option value="2014">2014</option>
        <option value="2013">2013</option>
      </select>
    </div>

    <div style="float:left; margin-left:190px; margin-right: 40px; margin-top:70px;">
      <a href="generateLink()" id="link"></a><br><br>
      <input type="submit" value="Go to Site"><br><br>
      <input type="reset" value="Reset Selection">
    </div>
  </div>
</form>

＆＃13;

使用onchange输出生成的链接

1 个答案: