甚至是javascript转换单选按钮到输入按钮的监听器 [英] even listener of javascript converting radio button to input button

问题描述

下面是根据所选单选按钮创建多边形或线条的JavaScript。



我想转换代码，而不是单选按钮，我可以使用简单的输入按钮执行功能。我是否必须为两个按钮编写单独的事件监听器？



如果是这样，我将如何用HTML调用它们？或者一个事件听众会做得好吗？那么事件将如何处理？



函数onPageLoaded（）

{

canvas.addEventListener（点击，onCanvasClick，false;

setInterval（updateScreen，100）;

}



函数onCanvasClick （e）

{

var x = e.clientX-canvas.offsetLeft;

var y = e.clientY-canvas.offsetTop;



开关（byId（'shapeType'）。value）

{

case'poly'：polyClick （x，y）;

休息;

案例'line'：lineClick（x，y）;

休息;

}

}

而不是这个



< select id ='shapeType'> ;

< option value =polyselected> Polygon< / option>

< option value =line> Line< / option>

< / select&g t;

我想用这个



< input type =buttonvalue =添加多边形>

< input type =buttonvalue =添加行>

完整代码你可以看到这个主题的解决方案http://www.codeproject.com/答案/ 693319 /无法绘制更多然后1-shape-on-html5-canvas＃answer1

Below is JavaScript which creates a polygon or line depending on the radio button selected.

I want to convert my code as such that instead of radio button, I can execute function using simple input button. Do I have to write seperate event listeners for both buttons?

If so, how will I call them in HTML? Or will one event listener do just fine? How will the events be handled then?

function onPageLoaded()
{
canvas.addEventListener("click", onCanvasClick, false);
setInterval(updateScreen, 100);
}

function onCanvasClick(e)
{
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;

switch (byId('shapeType').value)
{
case 'poly': polyClick(x,y);
break;
case 'line': lineClick(x,y);
break;
}
}
Instead of this

<select id='shapeType'>
<option value="poly" selected>Polygon</option>
<option value="line">Line</option>
</select>
I want to use this

<input type="button" value="Add polygon">
<input type="button" value="Add line">
For full code u can see the solution of this thread http://www.codeproject.com/Answers/693319/unable-to-draw-more-then-1-shape-on-html5-canvas#answer1

推荐答案

这里是解决方案。在按钮上添加一个公共类，然后写出相同的代码。



HTML



< input type =buttonvalue =添加多边形class =drawdata-type =poly>

< input type =buttonvalue =添加行 class =drawdata-type =line>

JS



函数onPageLoaded（）{

var buttons = document.getElementsByClassName（'draw'）;

for（var i = 0; i< buttons.length; i ++）{

buttons [i ] .addEventListener（click，onButtonClick，false）;

}

setInterval（updateScreen，100）;

}



函数onCanvasClick（e）{

var x = e.clientX-canvas.offsetLeft;

var y = e。 clientY-canvas.offsetTop;



switch（this.getAttribute（data-type））{

case'poly'：polyClick （x，y）;

休息;

案例'line'：lineClick （x，y）;

休息;

}

}

well here is the solution. Add a common class to the buttons and then write up the code for the same.

HTML

<input type="button" value="Add polygon" class="draw" data-type="poly">
<input type="button" value="Add line" class="draw" data-type="line">
JS

function onPageLoaded() {
var buttons = document.getElementsByClassName('draw');
for(var i=0;i < buttons.length; i++) {
buttons[i].addEventListener("click", onButtonClick, false);
}
setInterval(updateScreen, 100);
}

function onCanvasClick(e) {
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;

switch (this.getAttribute("data-type")) {
case 'poly': polyClick(x,y);
break;
case 'line': lineClick(x,y);
break;
}
}

修改<中的代码a href =http://www.codeproject.com/Answers/693319/unable-to-draw-more-then-1-shape-on-html5-canvas#answer1>无法在html5上绘制超过1个形状画布 [ ^ ]如下：

Modify the code in unable to draw more then 1 shape on html5 canvas[^] as follows:

var shapeType = 'poly';

.....

function onCanvasClick(e)
{
...
    //switch (byId('shapeType').value)
    switch (shapeType)
...
}

.....

// called whenever the screen needs updating
function updateScreen()
{
...
    //switch (byId('shapeType').value)
    switch (shapeType)
...

}

....

<input type="button" value="Add polygon" onclick="shapeType='poly';">
<input type="button"  value="Add line"  onclick="shapeType='line';">
<!--
<select id='shapeType'>
    <option value="poly" selected>Polygon</option>
    <option value="line">Line</option>
</select>
-->

这篇关于甚至是javascript转换单选按钮到输入按钮的监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！