onchangeを使用して生成されたリンクを出力します

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：ユーザーがyearsフィールドを変更した後

<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ボタンの上に生成されたリンクです。理想的には、最初のフィールド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要素に生成されたリンクをapppend必要があります。

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>