时间戳

首页 > 解决方案 > 如何从 document.getElementById .setAttribute href 添加按钮或将长 url 更改为其他名称

javascript - 如何从 document.getElementById .setAttribute href 添加按钮或将长 url 更改为其他名称

问题描述

我想问：我创建了一个带有一些值的选择选项，例如：

function updateinput(e) {
 
var selectedOption = e.target.options[e.target.selectedIndex];
   var url = selectedOption.getAttribute('data-url');
document.getElementById('data1').value = selectedOption.getAttribute('data1');
document.getElementById('data2').value = selectedOption.getAttribute('data2');
document.getElementById('data3').value = selectedOption.getAttribute('data3');
document.getElementById('data4').value = selectedOption.getAttribute('data4');
document.getElementById('data5').value = selectedOption.getAttribute('data5');
document.getElementById('data-url').setAttribute('href', url);
  document.getElementById('data-url').innerHTML=url;
}
<select onChange="updateinput(event)">
<option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com'>30 Day</option>
<option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com'>60 Day</option>
</select>

<input id="data1" name="data1" readonly type="text">
<input id="data2" name="data2" readonly type="text">
<input id="data3" name="data3" readonly type="text">
<input id="data4" name="data4" readonly type="text">
<input id="data5" name="data5" readonly type="text">
<a id="data-url" name="data-url">Anchor</a>

我想将网址http://google.com或http://yahoo.com更改为按钮

我尝试这样：

<a id="data-url" name="data-url" type="button">Anchor</a>不工作（按钮不显示）

<button><a id="data-url" name="data-url">Anchor</a></button>（按钮显示，但链接不在按钮中）

如果无法更改为按钮，请更改网址http://google.com或http://yahoo.com如下：Google Yahoo（其他文本但仍可点击）

  1. 谷歌
  2. 雅虎

提前致谢

标签： javascriptjqueryhtml

解决方案

您可以<a>使用 CSS 设置 -Link 元素的样式，使其看起来像一个按钮。我想这会满足你的需求。

我给了<option>-elements 另一个data-attribute名为data-name. 然后我称它们为“ Google ”和“ Yahoo ”，这个名称被打印到textContent实际链接进入链接的href- 属性中。

未来：将您的 DOM 元素保存在变量中，以便您可以更轻松地使用它们。那是link.href从哪里来的。

function updateinput(e) {
var selectedOption = e.target.options[e.target.selectedIndex];
var url = selectedOption.getAttribute('data-url');
var name = selectedOption.getAttribute("data-name");
const link = document.getElementById('data-url');
const data1 = document.getElementById('data1');
const data2 = document.getElementById('data2')
const data3 = document.getElementById('data3')
const data4 = document.getElementById('data4')
const data5 = document.getElementById('data5')

data1.value = selectedOption.getAttribute('data1');
data2.value = selectedOption.getAttribute('data2');
data3.value = selectedOption.getAttribute('data3');
data4.value = selectedOption.getAttribute('data4');
data5.value = selectedOption.getAttribute('data5');

link.href = url;
link.textContent = name;
link.classList.remove("hidden");
}
#data-url{
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
.hidden{
  display:none;
}
<select onChange="updateinput(event)">
<option selected="selected" hidden="hidden"></option>
<option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com' data-name="Google">30 Day</option>
<option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com' data-name="Yahoo">60 Day</option>
</select>

<input id="data1" name="data1" readonly type="text">
<input id="data2" name="data2" readonly type="text">
<input id="data3" name="data3" readonly type="text">
<input id="data4" name="data4" readonly type="text">
<input id="data5" name="data5" readonly type="text">
<a id="data-url" class="hidden" name="data-url">Anchor</a>

编辑：

  • 向 Anchor添加了类hidden，使其在开始时不可见。

  • 添加空<option>作为默认选择，并隐藏，因此它不会出现在下拉列表中。

  • link.classList.remove选择显示选项后立即添加Anchor。

  • 重构 JS 以提高可读性。

推荐阅读