Javascript Onclick jquery函数不起作用

现在我在下面写了一个提琴和一个代码示例。目前，我遇到的问题是，当我尝试在单击时为变量分配一个函数时，该函数不会执行。我希望能够将数字输入到输入字段中，并能够单击“生成”，并让它在单击时生成新的波形图。非常感谢您的帮助

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();

var波长=50，
振幅=50，
相位=90，
宽度=500，
color=“#FFF”，
厚度=3；
var高度=220；
var canvas=document.createElement（“canvas”）；
画布宽度=宽度；
canvas.height=高度；
$（“#波浪”）.append（画布）；
//获取上下文
var ctx=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.strokeStyle=颜色；
ctx.线宽=厚度；
相位=相位*Math.PI/180；
var amp=振幅-厚度/2；
var freq=2*Math.PI*（1/波长）；
var yOrigin=高度/2；
变量y1，y2；
ctx.beginPath（）；
对于（变量i=0；i

我已经修好了你的小提琴，这样就可以了：

以下是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>

波长
振幅


生成

以下是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();
}

函数generateName（）{
$（“#波浪”）。文本（“”）；
var波长=document.getElementById（'wavelength'）。值；
var振幅=document.getElementById（“振幅”）.value；
无功相位=90，
宽度=500，
color=“#FFF”，
厚度=3；
var高度=220；
var canvas=document.createElement（“canvas”）；
画布宽度=宽度；
canvas.height=高度；
$（“#波浪”）.append（画布）；
//获取上下文
var ctx=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.strokeStyle=颜色；
ctx.线宽=厚度；
相位=相位*Math.PI/180；
var amp=振幅-厚度/2；
var freq=2*Math.PI*（1/波长）；
var yOrigin=高度/2；
变量y1，y2；
ctx.beginPath（）；
对于（变量i=0；i

我让你的例子奏效了！享受！：）

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();
});

var相位=90，
宽度=500，
color=“#FFF”，
厚度=3；
var高度=220；
var canvas=document.createElement（“canvas”）；
画布宽度=宽度；
canvas.height=高度；
$（“#波浪”）.append（画布）；
$（“#btn生成”）。单击（函数（）{
振幅=$（'#振幅'）.val（）；
波长=$（“#波长”）.val（）；
//获取上下文
var ctx=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.strokeStyle=颜色；
ctx.线宽=厚度；
相位=相位*Math.PI/180；
var amp=振幅-厚度/2；
var freq=2*Math.PI*（1/波长）；
var yOrigin=高度/2；
变量y1，y2；
ctx.beginPath（）；
对于（变量i=0；i

您需要将生成波长的代码包装到一个函数中，然后为按钮指定一个单击事件。此外，在这个新函数的顶部，您需要获取文本框的当前值

下面是工作代码。请注意，通过一些清理[缓存dom选择、错误检查用户输入等]，这将非常好

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);

var波长=50，
振幅=50，
相位=90，
宽度=500，
color=“#FFF”，
厚度=3；
var高度=220；
var canvas=document.createElement（“canvas”）；
画布宽度=宽度；
canvas.height=高度；
$（“#波浪”）.append（画布）；
//获取上下文
函数GenerateWave（）{
var ctx=canvas.getContext（'2d'）；
//获取新值
波长=$（“#波长”）.val（）；
振幅=$（'#振幅'）.val（）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.strokeStyle=颜色；
ctx.线宽=厚度；
相位=相位*Math.PI/180；
var amp=振幅-厚度/2；
var freq=2*Math.PI*（1/波长）；
var yOrigin=高度/2；
变量y1，y2；
ctx.beginPath（）；
对于（变量i=0；i

准备好将其放入文档中

$（“#btnGenerate”）。在（“单击”，函数（）{

///这是你的手术 });

您想使用

$（元素）。在（'click'，function（））

上

在您的情况下，这看起来像：

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

---

我看不到你的纽扣上有任何束缚。此外，您的按钮没有id/类。因此，您需要将侦听器设置为内联。但我没看到？不过看起来不错。非常感谢你的帮助！不仅仅是你，还有其他人。这在很多方面帮助了我。继续努力！