太字/太字のボタン

Question

私は現在、プロジェクトの一環としてオンラインテキストエディタを使用していますが、私は大胆なボタンで小さな問題を抱えています。ここで

は、HTMLの私のボタンです：

<button id="b" onclick="bold()">Bold</button> 

そして、ここでは、JavaScriptで私の関数である。

function bold() { 
     var ban = document.getElementById("b"); 

     if (ban == true) { 
     document.getElementById("texto").style.fontWeight = 'bold'; 
     } else { 
     document.getElementById("texto").style.fontWeight = 'normal'; 
     } 
    } 

私はすべてを奪うと同じようにそれを残す場合：

 function bold() { 
     document.getElementById("texto").style.fontWeight = 'bold'; 
    } 

それは私のテキストを太字にしていますが、私の目標は私が<textarea>の中のテキストをアンボールドすることです。もう一度ボタンをクリックしてください。

私は間違っていますか？

Answer 1

function Bold() 
 
{ 
 
    
 
    var ban =document.getElementById("texto").style.fontWeight ; 
 
    
 
if(ban == 'normal') 
 
    { 
 
     document.getElementById("texto").style.fontWeight = 'bold'; 
 
    } 
 
else 
 
    { 
 
     document.getElementById("texto").style.fontWeight = 'normal'; 
 
    } 
 
}

<button id="b" onclick="Bold()">Bold</button> 
 

 
<p id="texto" style="font-weight:normal;">Hi</p>

Answer 2

これを試してみてください：

function Bold() 
{ 
    var text = document.getElementById("texto"); 
    var weight = text.style.fontWeight; 
    if(weight == 'bold') 
    { 
     text.style.fontWeight = 'normal'; 

    } 
    else 
    { 
     text.style.fontWeight = 'bold'; 
    } 
} 

Answer 3

使用外部のJavaScriptので、それはより速くロード時間のために、キャッシュされています、そしてあなたは、ベストプラクティスとして、JavaScriptから、あなたのHTMLを分ける必要があるため。しかし、実際には、関数が呼び出されるたびにvar banを再定義するという問題があります。見て、学ぶ：

//<![CDATA[ 
// change the pre var on any page using this onload technique 
var pre = onload, doc, bod, htm, E, boldToggle; // higher scope in case other onloads need access 
onload = function(){ // same as window.onload - note that window is implicit 
if(pre)pre(); // execute previous onload 

doc = document, bod = doc.body, htm = doc.documentElement; 
E = function(id){ 
    return doc.getElementById(id); 
} 
boldToggle = (function(){ // Anonymous function executes and scopes off var b before returning an unexecuted function 
    var b = 0; 
    return function(e){ // e is for Element here - this is function that is returned unexecuted 
    var s = e.style; 
    if(b){ // test if bold 
     s.fontWeight = 'normal'; b = 0; 
    } 
    else{ 
     s.fontWeight = 'bold'; b = 1; 
    } 
    } 
})(); 
E('b').onclick = function(){ 
    boldToggle(this); // this within Event refers to Element id='b' in this case 
} 

} // end onload 
//]]> 

ああ、<button>を使用して送信ボタンになることならば、その次の操作を行います。

<button type='button' id='b'>Bold</button> 

私が好む：

<input type='button' id='b' value='Bold' /> 

多くはそれは、より明らかですブラウザは<button>の.innerHTMLにアクセスすることはできません。実際には入力であるため、<button>タグは誤解を招く可能性があります。ユーザーが<button>の中に他の要素を入れ子にしたコードを修正したとき、私はこれを学びました。それは一部のブラウザでは機能しないので、私はちょうど<input type='button' />を好む。大規模なプロジェクトで作業する場合、他の人が属していない要素をスローしようとするのを防ぐことができます。

Answer 4

使用クラスはCSSスタイルを管理します。

function bold() { document.getElementById('b').classList.toggle('bold'); }

.bold { font-weight: bold; }

<button id="b" onclick="bold()">Bold</button>