使用那里已经存在的链接将属性添加到 ahref 按钮答案

【问题标题】：Adding attributes to ahref button using the link already present there使用那里已经存在的链接将属性添加到 ahref 按钮
【发布时间】：2020-04-21 20:36:40
【问题描述】：

我正在尝试将属性添加到从 ahref html 标记中获取的链接，请任何人指导我，我在这做错了什么？

链接将从 ahref 标签中获取，语言和货币从下拉列表中获取，然后最终链接将是 "link+"index.php?lang="+lang+"&currency="+currency;"

$(document).ready(function(){
var saveclass = null;

function onChangeHandler() {
  const lang = document.querySelector('#lang').value;
  const currency = document.querySelector('#currency').value;
  var link=document.querySelector('#theButton')..getAttribute('href');
  var strLink = link+"index.php?lang="+lang+"&currency="+currency;
  document.querySelector('#theButton').setAttribute('href', strLink);
  
}


onChangeHandler();
document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);




});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="price_billing.js"></script>
</head>

<body>

<select name="" id="lang">
    <option value="English">English</option>
    <option value="French">French</option>
    <option value="Spanish">Spanish</option>
  </select>

  <select name="" id="currency">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="MXN">MXN</option>
  </select>

  <a href="https://alpha.com" id="theButton">Click</a>

  <select name="" id="lang">
    <option value="English">English</option>
    <option value="French">French</option>
    <option value="Spanish">Spanish</option>
  </select>

  <select name="" id="currency">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="MXN">MXN</option>
  </select>

  <a href="https://alpha.com" id="theButton">Click</a>
  

</body>

</html>

【问题讨论】：

标签： javascript java php

【解决方案1】：

我对此很感兴趣。看起来您在 getAttribute 前面有一个额外的句点 [.]。

工作代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var saveclass = null;

function onChangeHandler() {
  const lang = document.querySelector('#lang').value;
  const currency = document.querySelector('#currency').value;
  var link=document.querySelector('#theButton').getAttribute('href');
  var strLink = link+"/index.php?lang="+lang+"&currency="+currency;
  document.querySelector('#theButton').setAttribute('href', strLink);

}

document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);

}); 
</script>

<select name="" id="lang">
    <option value="English">English</option>
    <option value="French">French</option>
    <option value="Spanish">Spanish</option>
  </select>

  <select name="" id="currency">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="MXN">MXN</option>
  </select>

  <a href="https://alpha.com" id="theButton">Click</a>

我还取出了额外的 onChangeHandler();因为您已经有运行该函数的更改侦听器。

虽然这技术上有效，但我不推荐它。如果用户不断更改选项，它会不断附加新 URL。以下示例：

最好在用户 100% 确定他们的选项后更改 URL，而不是每次更改。

【讨论】：