Question

我想将输入值动态传递给href，但无法按预期传递它们。这就是我尝试过的-

<a target="_blank" href="" 
onclick="this.href='https://www.google.com/maps/dir/?api=1&origin='   
                      +document.getElementById('lon3').value,+document.getElementById('lat3').value
                      &destination=2.183180,102.261803">map</a>

如何成功传递值？

Answer 1

您无法动态修改href onclick并期望重定向。

不过，您可以使用window.location = //your URL here

<a target="_blank" href="#" onclick="window.location = 'https://www.google.com/maps/dir/?api=1&origin=' + document.getElementById('lon3').value + ',' + document.getElementById('lat3').value + '&destination=2.183180,102.261803';">map</a>

Answer 2

您需要在链接上捕获onclick事件并删除默认行为，然后可以添加自定义重定向，例如：

document.querySelector("a").addEventListener("click", function(event) {
    var lon3 = document.getElementById('lon3').value; 
    var lat3 = document.getElementById('lat3').value;
    window.open("https://www.google.com/maps/dir/?api=1&origin=" + lon3 + lat3 +"&destination=2.183180,102.261803", '_blank');
    event.preventDefault();
}, false);

<a href="#">map</a>

<input type="hidden" id="lon3" value="somevalue">
<input type="hidden" id="lat3" value="somevalue">

Answer 3

优良作法是在函数中编写脚本并在HTML标签上调用它。所以，这是您的方案的工作演示-

function changeUrl() {
  let lattitude = document.getElementById('lat3').value;
  let longitude = document.getElementById('lon3').value;
  let target	= document.getElementById('myAnchor');
  let seperator = encodeURI(",");
  let href = 'https://www.google.com/maps/dir/?api=1&origin=' + lattitude + seperator + longitude + '&destination=2.183180,102.261803';
  target.href = href;
  console.log(target.href);
}

<a target="_blank" href="" onclick="changeUrl()" id="myAnchor">map</a>
                      
<input type="text" value="1234.5678" id="lon3">
<input type="text" value="0567.1211" id="lat3">

注意 ，它在SO代码段中无法按预期工作，因此请检查控制台以查看更改！ Here 是用于正常工作的演示的jsfiddle代码段

如何将两个文本框值传递给href链接

3 个答案: