使用 onchange 生成的输出 link

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>

 ...

我想做的是在用户更改years字段后，在submit按钮上方输出生成的link。理想情况下，我希望仅当第一个字段 cars 也发生更改时才生成它，但我不确定该怎么做，但现在这很重要。我知道我应该使用 onchange，但我不确定如何让它从 generateLink 函数实际输出 link。

编辑：

我能够使用以下函数输出它并在提交按钮上方添加 id link。 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 附加到下面的 #link 元素中：

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

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

希望对您有所帮助。

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();
}

<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>

使用 onchange 生成的输出 link

Output generated link using onchange

javascript

html

onchange

innerhtml

onsubmit