如何在HTML中創建可自定義的鏈接輸入？

Question

我正在使用此鏈接在HTML頁面上創建QR生成器：

<img id="qrimg" src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=2|99|XXX">
<input type="number" id="value">
<button type="submit" name="generate">Generate QR</button>

請幫助我，當用戶在輸入框中填寫值然后點擊Submit按鈕時，圖像的鏈接應從XXX更改為用戶的輸入，並生成新的QR圖像。

Answer 1

在單擊上，您可以通過| split()圖像的src 。 和陣列的最后一個元素改變為輸入值，然后再次join()由|

 const img = document.querySelector('#qrimg'); const input = document.querySelector('input') document.querySelector('button').addEventListener('click',(e) => { let src = img.src.split('|'); src[src.length-1] = input.value; img.src = src.join('|') console.log(img.src) }) 

 <img id="qrimg" src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=2|99|XXX"> <input type="number" id="value"> <button type="submit" name="generate">Generate QR</button> 

Answer 2

只需將URL前綴保存在var中即可。

我也將按鈕設為按鈕，並為所有內容指定了ID

 const img = document.getElementById("qrimg"); const inp = document.getElementById("value"); const url = img.src.replace("XXX",""); document.getElementById("generate").addEventListener("click",(e) => { e.preventDefault(); // if you keep the type=submit let val = inp.value; if (val) img.src=url+val; }) 

 <img id="qrimg" src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=2|99|XXX"> <input type="number" id="value"> <button type="button" id="generate">Generate QR</button>