Saya memiliki elemen input ini yang memiliki value="Go", elemen id adalah #btnSearchBox, saya mencoba mengganti "Go" dengan ikon fontawesome. Saat menggunakan alat dev jika saya secara manual mengganti nilai "Go" dengan &#xf002 ,kode untuk pencarian, dan secara manual menambahkan pencarian fa fa ke kelas saya mendapatkan hasil yang saya inginkan. Tetapi ketika saya mencoba menerapkan ini dengan JavaScript, itu menggantikan nilai dan menambahkan kelas tetapi alih-alih ikon muncul, saya mendapatkan string &#xf002 yang sebenarnya.

Ini adalah JavaScript yang saya gunakan untuk menambahkan kelas dan mengganti nilainya.

document.getElementById('btnSearchBox').value = '&#xf002';
var search = document.getElementById("btnSearchBox");
search.className += " fa fa-search";

Saya pikir ini ada hubungannya dengan & tapi saya tidak yakin apa yang bisa dilakukan untuk itu. Setiap saran akan dihargai!

Berikut adalah salinan elemen dari inspektur (seperti tanpa JavaScript).

<input id="btnSearchBox" name="btnSearchBox" type="submit" class="SearchBox1 ThemeButton GoThemeButton SearchGoThemeButton btn btn-default" value="Go" data-key="ThemeButton_Go_Search_string" onclick="return window.btnQuickAddToCart_onclick ? btnQuickAddToCart_onclick() : false;" \="">

Saya tidak dapat benar-benar mengakses kode jika tidak, saya hanya menambahkannya secara manual. Ini adalah kode gabungan americommerce yang bodoh untuk kotak pencarian di sana.

1
robothead 24 Oktober 2019, 21:21

1 menjawab

Jawaban Terbaik

Karakter unicode dalam javascript memiliki format \uXXXX, jadi ubah '&#xf002' menjadi '\uf002'

document.getElementById('btnSearchBox').value = '\uf002';
var search = document.getElementById("btnSearchBox");
search.className += " fa";
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input id="btnSearchBox" name="btnSearchBox" type="submit" class="SearchBox1 ThemeButton GoThemeButton SearchGoThemeButton btn btn-default" value="Go" data-key="ThemeButton_Go_Search_string" onclick="return window.btnQuickAddToCart_onclick ? btnQuickAddToCart_onclick() : false;" \="">
2
marzelin 24 Oktober 2019, 19:05