尝试使用输入文本创建动态捐赠按钮。基本上,输入要捐赠的金额并单击按钮。输入的金额应该是更新按钮URL,但什么都没有发生。我确信我遗漏了一些显而易见的东西,但这里的可用解决方案都不起作用(我尝试了7个(。谢谢
document.getElementById("input-custom-donation").onchange = function() {
document.getElementById("donate-button").href = "https://securepayments.cardpointe.com/pay?details=Donation|30|"+this.value+";
}
<label for="input-custom-donation">Enter Custom Donation Amount (numbers only):</label>
<input id="input-custom-donation" type="text" name="input-custom-donation">
<br>
<br>
<a class="button" id="donate-button" href="http://test/">Donate Now</a>
有一个拼写错误,末尾有一个超过两个引号的地方。
document.getElementById("donate-button").href = "https://securepayments.cardpointe.com/pay?details=Donation|30|" + this.value;
提醒一下,您可以随时使用字符串插值来提高字符串的可读性,这里有一个例子:
document.getElementById("donate-button").href = `https://securepayments.cardpointe.com/pay?details=Donation|30|${this.value}`
使用href
设置锚标签的链接
let btn = document.getElementById("donate-btn");
let amount = document.getElementById("value");
let link = document.getElementById("link");
const baseLink="www.google.com/donate?amount="
const makeLink=(amount)=>{
return baseLink+amount
}
function amountChange(e) {
btn.innerText = `Donate Me ${amount.value}$`
link.href=makeLink(amount.value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input onchange={amountChange()} id="value" type="number" />
<button id="donate-btn"> Donate Me </button>
<a id="link" href="www.google.com/donate?amount=0" > Link To Donate </a>
</body>
</html>