Question

所以目前我在下面我有一个小提琴和我的代码的例子。目前，我遇到的问题是当我尝试在点击时为变量分配函数时，该函数不会被执行。我希望能够在输入字段中输入数字，并且能够单击生成并让它在单击时生成新的波形图。非常感谢任何帮助！

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

您想使用$(element).on('click', function())。

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

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

Answer 2

我已经修复了你的小提琴，所以这将有效：

Fiddle

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

Answer 3

我让你的榜样有效！请享用！：）

<强> 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 4

您需要将生成波长的代码包装到函数中，然后将click事件分配给按钮。此外，在此新功能的顶部，您需要获取文本框的当前值。

以下是以下工作代码。请注意，这可以很好地处理一些清理[缓存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);

Answer 5

将此文件准备好

$（＆＃34;＃btnGenerate＆＃34）上（＆＃34;单击＆＃34;，函数（）{

///这是你的行动 }）;

Onclick jquery函数不会工作

5 个答案: