我正在嘗試制作一個 JavaScript/jQuery 腳本，該腳本將文本從輸入添加到已包含文本的錨標記。這是我正在嘗試完成的示例：
<!-- BEFORE INPUT HAS BEEN PRESSED -->
<a> Add an attachment for https://thislink/ </a>
<br>
<!-- AFTER INPUT AS BEEN USED AND SUBMIT WAS PRESSED -->
<a href="https://thislink/[text-from-input]"> [text-from-input] </a>
<form>
<input> text from this will be added to the text area </input>
<input type="submit" value="Submit"></input>
</form>
uj5u.com熱心網友回復：
您可以從 DOM 中選擇所需的元素，然后在提交表單時添加一個偵聽器，并在事件處理程式中簡單地獲取輸入的內容并更新 DOM。
以下示例將幫助您入門。此外，在使用用戶輸入之前對其進行清理總是一個好主意。
const link = document.querySelector(".link");
const form = document.querySelector(".form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const userInput = e.target.elements["attachment-input"].value;
link.href = `https://thislink/${userInput}`;
link.textContent = userInput;
});<a class="link">Add an attachment for https://thislink/</a>
<br>
<form class="form">
<label for="attachment-input">Enter Attachment</label>
<input type="text" id="attachment-input">
<input type="submit" value="Submit">
</form>uj5u.com熱心網友回復：
給你a和input一個id。使用 javascript 獲取輸入值。然后使用innerHTML將輸入值附加到a文本。
function appendText(e){
e.preventDefault();
var inputValue = document.getElementById('input').value
document.getElementById('theLink').innerHTML = inputValue
} <a id="theLink" href="https://thislink/[text-from-input]"> [text-from-input] </a>
<form>
<input id="input"> text from this will be added to the text area </input>
<input onclick="appendText(event)" type="submit" value="Submit"/>
</form>
uj5u.com熱心網友回復：
您可以使用id屬性讓容器保存您的錨標記，然后使用用戶寫入的任何值動態更新其錨標記：
function changeLink() {
document.getElementById("dynamic-link").innerHTML = `<a href='https://thislink/${document.getElementById("user-input").value}'>Link Generated</a>`
}<div> Add an attachment for https://thislink/ </div>
<br>
<div id="dynamic-link">
</div>
<br/>
<form>
<input type="text" id="user-input" />
<br/><br/>
<button type="button" onclick="changeLink()">Submit</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387826.html
標籤：javascript 查询