單擊圖標時將圖標的值添加到輸入字段中

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;
 }

我的願望是添加/更改帶有圖標值的輸入值，甚至更好的是 class（例如：fab fa-instagram-square）。

我的結果是這樣的：

Answer 1

要獲取單擊的圖標的 class，可以使用 className

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