javascript - 如何在 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>

请帮助我，当用户在输入框中填写值然后单击“提交”按钮时，图像的链接应从 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>