font-awesomeアイコンをクリックした後にfont-awesomeを埋める方法は？

Question

私はフォント素晴らしいアイコンを持っていますが、私は彼が埋められていなければならないアイコンをクリックしたとき、まだ彼は唯一の

を概説されるHTML

<center><span id="timesClicked">0</span></center> 

<i class="fa fa-heart-o btn btn-default" onclick="javascript:btnClick()"></i> 

Javascriptを

var timesClicked = 0; 

function btnClick() { 
timesClicked++; 

document.getElementById('timesClicked').innerHTML = timesClicked; 
return true 
} 

はこちらhttps://jsfiddle.net/7ghbhtcf/

Answer 1

心臓のアイコンを埋めるには、クラスを交換する必要があります（fa-heart-oを削除し、 fa-heart）：

var timesClicked = 0; 
 

 
function btnClick() { 
 
    timesClicked++; 
 
    if (timesClicked === 1) { 
 
    var elem = document.querySelector('i'); 
 
    elem.classList.remove('fa-heart-o'); 
 
    elem.classList.add('fa-heart'); 
 
    } 
 
    document.getElementById('timesClicked').innerHTML = timesClicked; 
 
    return true 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<center><span id="timesClicked">0</span></center> 
 

 
<i class="fa fa-heart-o btn btn-default" onclick="javascript:btnClick()"></i>

も、あなたがそれno longer existsとして<center>要素を使うべきではないことに注意してください。