Trigger javascript function onclick

Question

Я создал простое приложение для рисования с помощью скрипта из mudcu, sketch.js.

Я внесла некоторые изменения в код, но теперь у меня есть проблемы с вызовом функции, задающей цвет карандаша.

var Sketch = function(config) { "use strict"; 
var that = this; 
........... 
var ctx2 = layer2d[2]; 
// Style object. 
this.zoom = 1; 

this.style = { 
    tool: "brush", 
    globalAlpha: 1, 
    globalCompositeOperation: "source-over", 
    strokeStyle: "#000", 
    lineWidth: 5, 
    lineCap: "round", 
    lineJoin: "round" 

Мой вопрос, как я могу установить «this.style» StrokeStyle к, например, «# D55151», когда пользователь нажимает кнопку?

Answer 1

Использование JQuery является хорошим решением для вашей проблемы:

<button id="myBtn">My Button</button> 

JQuery

$('#myBtn').click(function(){ 
    // set you style 
    that.style.strokeStyle = "#D55151"; // var that = this; 
}); 

UPDATE:

Чистую Javascript Ответ:

document.getElementById('myBtn').onclick=function(){ 
    // set you style 
    that.style.strokeStyle = "#D55151"; // var that = this; 
}; 

Answer 2

вы можете добавить :

function(config, style) { 
    this.style = style || this.style = { 
      tool: "brush", 
      globalAlpha: 1, 
      globalCompositeOperation: "source-over", 
      strokeStyle: "#000", 
      lineWidth: 5, 
      lineCap: "round", 
      lineJoin: "round" 
     }; 
} 

и назвать его как

$("#somebutton").on("click", function() { 
    Sketch({config}, {overides style}); 
}); 

или еще лучше, если вы используете JQuery подчеркивания:

function(config, style) { 
    this.style = $.extend({ 
      tool: "brush", 
      globalAlpha: 1, 
      globalCompositeOperation: "source-over", 
      strokeStyle: "#000", 
      lineWidth: 5, 
      lineCap: "round", 
      lineJoin: "round" 
     }, style); 
} 

Я предпочитаю второе решение намного безопаснее ...