javascript - 在图标点击时将图标的值添加到输入字段中

Question

HTML 部分

<a href="#" class="btn btn-primary p-1 m-1"><i class="fab fa-instagram-square fa-2x mt-1" value="fab fa-instagram-square" onclick="changeValue(this)"></i></a>
<a href="#" class="btn btn-primary p-1 m-1"><i class="fab fa-instagram fa-2x mt-1" value="fab fa-instagram"></i></a>
<a href="#" class="btn btn-primary p-1 m-1"><i class="fab fa-tiktok fa-2x mt-1" value="fab fa-tiktok"></i></a>
    
<input class="form-control w-100" id="icon" name="icon">

这是我测试过的，效果不好

function changeValue(o){
  document.getElementById('icon').value=o.innerHTML;
 }

我的愿望是使用图标值或更好的类添加/更改输入值（例如：fab fa-instagram-square）。

我的结果是这样的：

标签： javascripticonsfont-awesome

Answer 1

要获取单击图标的类别，您可以使用 className

document.getElementById('icon').value=o.className;