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

单击时，您可以src split() |图像的图像，并将数组的最后一个元素更改为输入值，然后再join() |更改Error code 406 details.

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前缀保存在变量中即可。

我也将按钮设为按钮，并为所有内容提供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>

如何在HTML中创建可自定义的链接输入？

2 个答案: