单击按钮时将链接href/文本更改为文本框的值？答案

【问题标题】：Change link href/text to value of a textbox on button click?单击按钮时将链接href/文本更改为文本框的值？
【发布时间】：2017-07-13 23:36:36
【问题描述】：

我想知道是否可以让“a href”元素的文本成为按钮单击时文本框的值。

$("#btn").click(function(){
$("#myLink").text($("#Coordinate1").val());
  $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<button id="btn">Click</button>
<a id="myLink" href="#"><!-- THIS MUST BE VALUE OF "Coordinate1" --></a>

我希望解释清楚。

谢谢。

已解决：在下面选择的答案中添加了代码。感谢大家的帮助，成员提供的所有解决方案都按我的意愿工作。

【问题讨论】：

点击什么按钮？您的代码中没有按钮。
我没有添加按钮只是想解释它的要点。对不起。

标签： javascript jquery hyperlink href

【解决方案1】：

您可以使用以下代码：

function setLink() {
  var t = document.getElementById("Coordinate1").value;
  var h = "https://www.google.com/maps/place/" + t;
  var link = document.getElementById("myLink");
  link.href = h; //set link url
  link.innerText = h; //set link text (remove this line if you don't want it)
}

<input type="text" id="Coordinate1" oninput="setLink()">
<input type="button" value="get link" onclick="setLink()">
<div>
  <a id="myLink" href="#"></a><!-- THIS MUST BE VALUE OF "Coordinate1" -->
</div>

【讨论】：

请注意，它会立即更新链接（当用户在文本框中输入时），因此不再需要 [获取链接] 按钮..！ ;D 希望有用
谢谢！它确实有效:) 我已经选择了另一个答案作为解决方案，但仍然会投票。很好的解决方案。

【解决方案2】：

看来你想做这样的事情。

$("#btn").click(function(){
	$("#myLink").text($("#Coordinate1").val());
  $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click</button>
<input type="text" id="Coordinate1">
<a id="myLink" href="#"><!-- THIS MUST BE VALUE OF "Coordinate1" --></a>

【讨论】：

谢谢！这与按钮完美配合。顺便说一句，在我的原始代码中它是一个按钮元素，我只是没有包含它，因为我认为没有必要，因为你们是专家！ :) 谢谢老兄！

【解决方案3】：

是的，您可以，但您必须在用户单击某些内容或完成输入链接或其他事件时执行此操作。这里我使用了一个按钮：

$("#change").click(function() {  // when the button is clicked, change the href to whatever in the input + the root, and change it's text to the value as well
  var value = $("#Coordinate1").val();
  $("#myLink").prop("href", "https://www.google.com/maps/place/" + value) // change the href
              .text(value); // change the text content
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<a id="myLink" href="#">
  <!-- THIS MUST BE VALUE OF "Coordinate1" -->
</a>
<button id="change">Change</button>

【讨论】：

非常感谢。很好的解决方案。经过测试，也在我的环境中工作。

【解决方案4】：

我相信这就是您所要求的。我采用了您已经拥有的代码，并将其放置在单击我添加到页面中的按钮元素中。还要确保在 a tag 中提供一个实际的文本值，否则用户将无法点击。

$("#update").click(function() {
  $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<button id="update">update</button>
<a id="myLink" href="#">
Link
  <!-- THIS MUST BE VALUE OF "Coordinate1" -->
</a>

【讨论】：