Muhammad Ali Muhammad Ali - 5 months ago 9
jQuery Question

.append value of input text to <canvas> isnt displaying the output of .append('<p>' + value + '</p>')

I have a jsfiddle here: https://jsfiddle.net/gemcodedigitalmarketing/zn5yLwh3/

What I want is the text in the customText input to be appended to the canvas. Though I am unsure as to why this is not working.

It works when I tried yesterday to append td and tr to a table. But maybe because its a canvas it needs a different way of adding text?

not sure... either way i would apprecaite help.

$('#addText').click(function() {
var value = $('#customText').val();
$('canvas').append('<p>' + value + '</p>');
});


This is my jquery at the bottom of the page

<div class="assets">
<h3>Assets</h3>
<div class="text">
<h4>Text</h4>
<input id="customText" type="text">
<button id="addText" class="btn btn-default">Add Text</button>
<p></p>
</div>
<div class="image">
<h4>Images</h4>
<ul class="list-unstyled">
<!-- List of images here -->
<!-- <li><img src="images/sample.jpeg" class="img-rounded" /></li> -->
</ul>
</div>
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
<div class="block">
<!-- Add images and texts to here -->
</div>
</div>





This is the relevant html.

Hope that gives you guys enough to go on...

Answer

In your case canvas is not an element but a class.

This is from your fiddle:

<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
    <div class="block">
        <!-- Add images and texts to here -->
    </div>
</div>

So you have to use it in the selector as:

$('.canvas')

Don't forget the dot.

Comments