更改href文本是按鈕點擊文本框的值？

我想知道是否有可能讓「a href」元素的文本成爲按鈕單擊時文本框的值。更改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>

我希望解釋清楚足夠多。

謝謝。

求助：在下面選擇的答案上添加了代碼。感謝大家的幫助，所有成員提供的解決方案都能夠滿足我的需求。

來源

2017-02-23 MailBlade

在什麼請點擊？代碼中沒有按鈕。 –

我沒有添加按鈕只是想解釋它的要點。抱歉。 – MailBlade

似乎你想要做這樣的事情。

$("#btn").click(function(){ 
 
\t $("#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>

來源

2017-02-23 13:16:18 vatz88

謝謝！這是完美的按鈕。順便說一句，在我原來的代碼它是在一個按鈕元素，我只是沒有包括它，因爲我認爲這是沒有必要的，因爲你們是專家！：）多謝，夥計！ – MailBlade

是的，你可以，但你必須這樣做，當用戶點擊或完成鍵入鏈接或其他事件。這裏我用一個按鈕：

$("#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>

來源

2017-02-23 13:13:03

非常感謝。好的解決方案經過測試，也在我的環境中工作。 – MailBlade

我相信這是你問什麼。我把你已經擁有的代碼放在了我添加到頁面的按鈕元素的點擊中。此外，請務必在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>

來源

2017-02-23 13:13:44 Joffutt4

非常感謝隊友！ – MailBlade

您可以使用下面的代碼：

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>

來源

2017-02-23 13:16:32

請注意，它會立即更新鏈接（作爲文本框中的用戶類型），因此不再需要[獲取鏈接]按鈕..！ ; D希望有用 –

謝謝！它確實工作:)我已經選擇了另一個答案作爲解決方案，但仍然upvote。好的解決方案 – MailBlade

更改href文本是按鈕點擊文本框的值？

回答

相關問題