Variablen in einer hrf-Verbindung in html setzen

Question

Ich habe etwa 50 Links zu gerenderten Dashboards, die sich ziemlich voneinander unterscheiden. Aber alle haben zwei Attribute. Ein von und ein Attribut. Sie definieren einen Zeitrahmen mit einem Start- und einem Enddatum.

Für jeden der rund 50 Links gibt es einen HTML-Tag im Body und die Links selbst sind die href-Attribute. Bitte beachten Sie dies als Beispiel:

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

Jetzt brauche ich zwei Eingabefelder, die mir erlauben, die Daten zu setzen. Zum Beispiel, wenn ich 02022017 in das Eingabefeld für das from-Attribut eingreife, möchte ich ein Javascript, um alle von den Attributen in den hrefs der Tags im Body durch diesen Eingabewert zu ersetzen.

Ich habe 50 Zeilen, die wie das obige Beispiel aussehen, aber sie haben eine andere URL. Sie haben auch verschiedene Dashboard-Namen und Panel-IDs.

Haben Sie eine Idee? Natürlich kann ich ein Javascript und zwei Eingabeformulare einrichten, aber ich weiß nicht, wie man ein href-Attribut teilweise als Variable setzt. Danke

Answer 1

Ich denke du gehst alles falsch. Sie möchten nicht alle href Attribute auf allen diesen Verbindungen aktualisieren, möchten Sie eine Javascript-Funktion auf jedem Klick von ihnen aufrufen und es zu einer bestimmten URL mit einer Variablen von/zu Attribut navigieren lassen.

Werfen Sie einen Blick auf dieses Beispiel:

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

Wenn Sie einfach nur, dass es wie ein Link genau funktioniert console.log(uri)-location.href=uri ändern, aber jetzt aus und sind dynamisch.

---

Es scheint, Sie müssen gesetzt tatsächlich das Attribut href. Dies ist auch machbar.

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