htmlのhrfリンクの変数を設定する

Question

レンダリングされたダッシュボードには、互いにかなり異なる50のリンクがあります。しかし、すべてには2つの属性があります。 aとaは属性です。それらは、開始日と終了日を持つ時間枠を定義します。

約50個のリンクのそれぞれについて、本体にhtmlタグがあり、リンク自体がhref属性です。これを例として取ってください：

<a id="id1" download="picture.png" href="https://url.com/render/dashboard-solo/db/dashboardname?panelId=5&from=01012017&to=04012017&width=1000&height=50"/> 

私は日付を設定するための2つの入力フィールドが必要です。たとえば、from属性の入力フィールドに02022017を入力した場合、javascriptはbody内のタグのhref内のすべてのfrom属性をその入力値に置き換える必要があります。

私は上記の例のように50行ありますが、それらは異なるURLを持っています。また、ダッシュボードの名前とパネルIDも異なります。

アイデアはありますか？もちろん、私はjavascriptと2つの入力フォームを設定できますが、変数としてhref属性を部分的に設定する方法はわかりません。ありがとう

Answer 1

私はあなたがこれについてすべて間違っていると思います。すべてのリンクのすべてのhref属性を更新したくない場合は、それぞれのクリックでjavascript関数を呼び出して、/から属性への変数を持つ特定のURLに移動します。

は、この例を見てみましょう：

function goToDashboard(panelId){ 
 
    var fromValue = document.getElementById("from").value; 
 
    var toValue = document.getElementById("to").value; 
 
    var uri = "https://url.com/render/dashboard-solo/db/dashboardname?panelId=" + panelId + "&from=" + fromValue + "&to=" + toValue + "&width=1000&height=50"; 
 
    console.log(uri); 
 
    return false; 
 
}

<a id="id1" download="picture.png" href="#" onClick="return goToDashboard(5)">Go to dashboard</a> 
 

 
<hr> 
 
From: <input id="from" value="01012017"> 
 
To: <input id="to" value="04012017">

あなたは、単にconsole.log(uri)location.href=uriに、それは正確にリンクのように動作しますが、今からと動的であるためにことを変更した場合。

---

あなたが実際にhref属性を設定する必要がありそうです。これも可能です。

function goToDashboard(link, panelId){ 
 
    var fromValue = document.getElementById("from").value; 
 
    var toValue = document.getElementById("to").value; 
 
    var uri = "https://url.com/render/dashboard-solo/db/dashboardname?panelId=" + panelId + "&from=" + fromValue + "&to=" + toValue + "&width=1000&height=50"; 
 
    link.setAttribute("href",uri); 
 
    link.click(); 
 
    return false; 
 
}

<a id="id1" download="picture.png" href="#" onClick="return goToDashboard(this, 5)">Go to dashboard</a> 
 

 
<hr> 
 
From: <input id="from" value="01012017"> 
 
To: <input id="to" value="04012017">