I want to update a specific object member via an event.
An object with a canvas is created and that object has a text member that will be drawn on the canvas. Each object contains html that fires an event called call_text.
I want to update the text member of each object through the call_text event.
But the code below doesn't work the way I want it to.
The point is that updating the text member via the call_text event is reflected in all object members, not the event object.
I would like to know how to solve this problem.
Thanks for reading.
Sorry for my english.
What I have tried:
var ele_canvas = function(){
var subtext;
return {
setText: function( text ){
subtext = text;
},
display: function( args ){
html = "<div id='canvasWrapper"+args.id+"' class='canvaswrapper'><canvas ><canvas id='canvas"+args.id+"'></canvas><a href='#' class='call_text' data-root='"+args.id+"' data-target='"+args.target+"' >choose</a></div>";
return html;
}
}
}
var theCanvas;
$(document).on('click', '.view-canvas', function(){
const args = {
'id': $(this).attr('data-id'),
'type': $(this).attr('data-type');
}
var theCanvas = Object.create(ele_canvas());
$('#dataFeed').append(theCanvas.display(args));
}
$(document).on('click', '.call_text', function(){
const id = $(this).attr('data-root');
const target = $(this).attr('data-target');
$.ajax({
url: "http://localhost/html/subtext/view_text.php",
type: "GET",
data: { data: id },
success: function ( json ){
const result = JSON.parse(json);
console.log(typeof(result));
theCanvas.setText(result.subText);
drawScreen(target, true);
}
});
return false;
});