切換Onclick問題使用Javascript

簡單地說，我試圖切換一個按鈕來使一行變粗體（或不）。我在這裏閱讀了幾個類似於這個問題的問題，但解決方案並沒有幫助我。這裏是我的代碼：切換Onclick問題使用Javascript

<!DOCTYPE HTML> 
    <html> 
    <head> 
     <style> 
      body { 
       margin: 0px; 
       padding: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="DrawLineDiv"> 
      <canvas id="DrawLineCanvas" width="578" height="200"></canvas> 
      <script> 
       var canvas = document.getElementById('DrawLineCanvas'); 
       var context = canvas.getContext('2d'); 

       // Use beginPath() to declare that a new path is to be drawn 
       context.beginPath(); 

       // Place the drawing cursor at the desired point 
       context.moveTo(100, 150); 

       // Determine where to stop drawing 
       context.lineTo(450,50); 

       //Draw the line 
       context.stroke(); 
      </script> 
     </div> 
     <script> 
      var canvas = document.getElementById("DrawLineCanvas"); 
      //var context = canvas.getContext('2d'); 

      function toggleLineBold(button) { 
      var button; 

      if (button == "BoldNow") { 
       context.lineWidth = 15; 
       context.stroke(); 

       document.getElementById("BoldLineButton").onclick = function(){ 
        toggleLineBold('Regular'); 
        }; 

       } else { 
       context.lineWidth = 1; 
       context.stroke(); 

       document.getElementById("BoldLineButton").onclick = function(){ 
        toggleLineBold('BoldNow'); 
        }; 
       return; 
       }; 
      }; 
     </script> 
     <div id="BoldLineButton" style="height:50px; width:120px; border:2px solid #6495ed; background-color:#bcd2ee; border-radius:10px; margin-left: 5px; text-align:center" onclick="toggleLineBold('BoldNow')"> 
     <br/>Toggle Bold Line<br/> 
     </div> 
    </body> 
</html>

該生產線在JavaScript在試圖改變onclick事件的線變爲大膽，但觸發一個錯誤。我知道我錯了，我只是不確定。

預先感謝您的幫助。

來源

2014-01-27 Colyn1337

在你的第二個腳本標籤，你忘了引號。 'document.getElementById（DrawLineCanvas）;'和'document.getElementById（BoldLineButton）.onclick'應該是document.getElementById（「DrawLineCanvas」）;''和'document.getElementById（「BoldLineButton」）。onclick' – Givi

然後你重載'button'參數，在函數範圍內聲明一個具有相同名稱的變量。 – Givi

當你得到一個錯誤，如「無法設置屬性'onclick'null」與* getElementById *相關時，它表示該方法返回* null *，所以它沒有找到該元素。 – RobG

LIVE DEMO

HTML：

<canvas id="DrawLineCanvas" width="578" height="200"></canvas> 
<button id="BoldLineButton">Line size: <b>1</b></button>

JS：

var doc = document, 
    canvas = doc.querySelector('#DrawLineCanvas'), 
    boldBtn = doc.querySelector('#BoldLineButton'), 
    ctx = canvas.getContext('2d'), 
    size = [1, 3, 5, 10, 15],  // use only [1, 15] if you want 
    currSize = 0; // size[0] = 1 // Index pointer to get the value out of the 
            // size Array 


function draw(){ 
    canvas.width = canvas.width; 
    ctx.beginPath(); 
    ctx.moveTo(100, 150); 
    ctx.lineTo(450,50); 
    ctx.lineWidth = size[currSize]; // Use currSize Array index 
    ctx.stroke(); 
} 
draw(); 

function toggleLineBold() { 
    ++currSize;      // Increase size and 
    currSize %= size.length;   // loop if needed. 
    boldBtn.getElementsByTagName('b')[0].innerHTML = size[currSize]; 
    draw(); 
} 

boldBtn.addEventListener("click", toggleLineBold);

來源

2014-01-28 00:39:27

這是一個真正優雅的解決方案。我會從這個例子中學到很多東西，非常感謝你！ – Colyn1337

@ Colyn1337 :)不客氣 –

切換Onclick問題使用Javascript

回答

相關問題