Onclick jquery function wont work

Question

So currently I down below I have both a fiddle and an example of my code. Currently, the problem I am having is when I try to assign variables a function on click, the function isn't executed. I want to be able to input numbers into the input fields and be able to click generate and have it generate a new wave graph on click. Any help is greatly appreciated!

JsFiddle

HTML

<div id="container">
    <div id="wave"></div>
    <div id="wavelength-text" class="text">Wavelength</div>
    <div id="amplitude-text" class="text">Amplitude</div>
    <br />
    <input type="text" value="50" id="wavelength"></input>
    <input type="text" value="50" id="amplitude"></input>
    <div id="button"><button>Generate</button></div>
</div>

JavaScript

var wavelength= 50,
    amplitude= 50,
    phase= 90,
    width= 500,
    color= "#FFF",
    thickness= 3;

var height = 220;

var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height =  height;
$("#wave").append(canvas);

//get context
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle =  color;
ctx.lineWidth =  thickness;

phase =  phase * Math.PI / 180;
var amp =  amplitude -  thickness / 2;
var freq = 2 * Math.PI * (1 /  wavelength);
var yOrigin = height / 2;

var y1, y2;
ctx.beginPath();
for ( var i = 0; i <  width; i++) {
    y1 = amp * Math.sin(phase + freq * i) + yOrigin;
    y2 = amp * Math.sin(phase + freq * (i + 1)) + yOrigin;
    ctx.moveTo(i , y1);
    ctx.lineTo(i + 1, y2);
}
ctx.stroke();

Answer 1

You want to use $(element).on('click', function()).

In your case, this would look like:

$("#button").on('click', function(value1, value2) {
  // ... generator would go here
});

Answer 2

put this in your document ready

$("#btnGenerate").on("click",function(){

/// here go your operation });

Answer 3

you need to wrap the code that generates the wave length into a function and then assign a click event to your button. Also, at the top of this new function, you need to grab the current value of the text boxes.

Here is the working code below. Please note that this would do very well with some clean up [cache dom selects, error checking user inputs, etc]

var wavelength= 50,
    amplitude= 50,
    phase= 90,
    width= 500,
    color= "#FFF",
    thickness= 3;

var height = 220;

var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height =  height;
$("#wave").append(canvas);

//get context
function GenerateWave() {

var ctx = canvas.getContext('2d');

//get new values
wavelength = $('#wavelength').val();
amplitude = $('#amplitude').val();

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle =  color;
ctx.lineWidth =  thickness;

phase =  phase * Math.PI / 180;
var amp =  amplitude -  thickness / 2;
var freq = 2 * Math.PI * (1 /  wavelength);
var yOrigin = height / 2;

var y1, y2;
ctx.beginPath();
for ( var i = 0; i <  width; i++) {
    y1 = amp * Math.sin(phase + freq * i) + yOrigin;
    y2 = amp * Math.sin(phase + freq * (i + 1)) + yOrigin;
    ctx.moveTo(i , y1);
    ctx.lineTo(i + 1, y2);
}
ctx.stroke();
}

$('#button').on('click.generate', GenerateWave);

Answer 4

I made your example working! Enjoy! :)

HTML:

<div id="container">
    <div id="wave"></div>
    <div id="wavelength-text" class="text">Wavelength</div>
    <div id="amplitude-text" class="text">Amplitude</div>
    <br />
    <input type="text" value="50" id="wavelength"></input>
    <input type="text" value="50" id="amplitude"></input>
    <div id="button"><button id="btn-generate">Generate</button></div>
</div>

JS:

var phase= 90,
    width= 500,
    color= "#FFF",
    thickness= 3;

var height = 220;

var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height =  height;
$("#wave").append(canvas);

$('#btn-generate').click(function() {
    amplitude = $('#amplitude').val();
    wavelength= $('#wavelength').val();
    //get context
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.strokeStyle =  color;
    ctx.lineWidth =  thickness;

    phase =  phase * Math.PI / 180;
    var amp =  amplitude -  thickness / 2;
    var freq = 2 * Math.PI * (1 /  wavelength);
    var yOrigin = height / 2;

    var y1, y2;
    ctx.beginPath();
    for ( var i = 0; i <  width; i++) {
        y1 = amp * Math.sin(phase + freq * i) + yOrigin;
        y2 = amp * Math.sin(phase + freq * (i + 1)) + yOrigin;
        ctx.moveTo(i , y1);
        ctx.lineTo(i + 1, y2);
    }
    ctx.stroke();
});

Answer 5

I've fixed your fiddle so this will work:

Fiddle

Here's the html:

<div id="container">
    <div id="wave"></div>
    <div id="wavelength-text" class="text">Wavelength</div>
    <div id="amplitude-text" class="text">Amplitude</div>
    <br />
    <input type="text" value="50" id="wavelength"></input>
    <input type="text" value="50" id="amplitude"></input>
    <div id="button" onclick="generateFrame()"><button>Generate</button></div>
</div>

Here's the JS:

function generateFrame(){
    $("#wave").text('');
    var wavelength = document.getElementById('wavelength').value;
    var amplitude = document.getElementById('amplitude').value;

var phase= 90,
    width= 500,
    color= "#FFF",
    thickness= 3;

var height = 220;

var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height =  height;
$("#wave").append(canvas);

//get context
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle =  color;
ctx.lineWidth =  thickness;

phase =  phase * Math.PI / 180;
var amp =  amplitude -  thickness / 2;
var freq = 2 * Math.PI * (1 /  wavelength);
var yOrigin = height / 2;

var y1, y2;
ctx.beginPath();
for ( var i = 0; i <  width; i++) {
    y1 = amp * Math.sin(phase + freq * i) + yOrigin;
    y2 = amp * Math.sin(phase + freq * (i + 1)) + yOrigin;
    ctx.moveTo(i , y1);
    ctx.lineTo(i + 1, y2);
}
ctx.stroke();
}