Bind event to input buttons

ofeyofey · October 27, 2015, 2:13pm

Hi,
I have eight button in a html page, all of which call the same javascript function move(). Is there any way to distinguish which button called the function? Or do i need to have the id of each button getElementById for each button?

Here is the html and the script,

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    div{
        display: inline-block;
        vertical-align: top;
        border: 3px solid #add8e6;
        border-radius: 6px;
    }
    </style>
</head>
<body>
    <div>
        <table>
            <tr><td>Stanislav</td><td><input type="button" id="student1up" value="Up" onclick="move();"/></td><td><input type="button" id="student1down" value="Down" onclick="move();"/></td></tr>
            <tr><td>Pavel</td><td><input type="button" id="student2up" value="Up" onclick="move();"/>test</td><td><input type="button" id="student2down" value="Down" onclick="move();"/></td></tr>
            <tr><td>Sasha</td><td><input type="button" id="student3up" value="Up" onclick="move();"/></td><td><input type="button" id="student3down" value="Down" onclick="move();"/></td></tr>
            <tr><td>Dasha</td><td><input type="button" id="student4up" value="Up" onclick="move();"/></td><td><input type="button" id="student4down" value="Down" onclick="move();"/></td></tr>
        </table>
    </div>
        <script type="text/javascript">
            var student = document.getElementById("student1up");
            var move = function(){
                console.log(student.value);
            }
            move();
            
        </script>
</body>
</html>

I think that what I am trying to do is bind an event to each input button.
Thanks,

Dormilich · October 27, 2015, 2:55pm

If you’d assigned the buttons via JavaScript, then the this variable is a reference to the button clicked.

ofeyofey · October 27, 2015, 2:59pm

Dormilich,
Thanks for your reply.
I am actually just playing the .this but I must not be going about it the right way.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    div{
        display: inline-block;
        vertical-align: top;
        border: 3px solid #add8e6;
        border-radius: 6px;
    }
    </style>
</head>
<body>
    <div>
        <table>
            <tr><td>Stanislav</td><td><input type="button" id="student1up" value="Up" onclick="move();"/></td><td><input name="student" type="button" id="student1down" value="Down" onclick="move();"/></td></tr>
            <tr><td>Pavel</td><td><input type="button" id="student2up" value="Up" onclick="move();"/>test</td><td><input name="student" type="button" id="student2down" value="Down" onclick="move();"/></td></tr>
            <tr><td>Sasha</td><td><input type="button" id="student3up" value="Up" onclick="move();"/></td><td><input name="student" type="button" id="student3down" value="Down" onclick="move();"/></td></tr>
            <tr><td>Dasha</td><td><input type="button" id="student4up" value="Up" onclick="move();"/></td><td><input name="student" type="button" id="student4down" value="Down" onclick="move();"/></td></tr>
        </table>
    </div>
        <script type="text/javascript">
            //var student = document.getElementsByTagName("student");
            var student = document.getElementById("student2up");
            var move = function(){
                console.log(this.value);
            }
            //move();
            
        </script>
</body>
</html>

Thanks

ofeyofey · October 27, 2015, 4:33pm

I tried this but it doesn’t work,

<input type="button" id="student2up" value="Up" onchange="move(this);"/>
......................
function move(obj)
                {
                     console.log(obj.value);
                }

Thanks

PaulOB · October 27, 2015, 5:15pm

The button doesn’t have anything that can be changed so onchange will do nothing. If you change it back to click then it should work as you had it before.

<input type="text" id="student1up" value="Up" onclick="move(this);">

…

 var move = function(obj){
   console.log(obj.value);
 }

Of course you should remove those inline event handlers and apply them from the js instead (and then you wouldn’t have run into the issue with ‘this’)

ofeyofey · October 27, 2015, 8:35pm

Hi,
That is working great now.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Student of the Day</title>
    <style>
    div{
        display: inline-block;
        vertical-align: top;
        border: 3px solid #add8e6;
        border-radius: 6px;
    }
    button{
        border: 3px solid #add8e6;
    }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>Stanislav</td><td><button id="student1up" onclick="move(this);">Up</button></td>
                <td><button id="student1down" value="Down" onclick="move(this);">Down</button></td></tr>
                <tr><td>Pavel</td><td><button id="student2up" onclick="move(this);">Up</button></td>
                <td><button id="student2down" value="Down" onclick="move(this);">Down</button></td></tr>
                <tr><td>Sasha</td><td><button id="student3up" onclick="move(this);">Up</button></td>
                <td><button id="student3down" value="Down" onclick="move(this);">Down</button></td></tr>
                <tr><td>Dasha</td><td><button id="student4up" onclick="move(this);">Up</button></td>
                <td><button id="student4down" onclick="move(this);">Down</button></td>
            </tr>
        </table>
    </div>
    <div>
        <canvas id="canvas" width="300" height="500"></canvas>
    </div>
        <script type="text/javascript">
            
            
            function move(obj)
                {
                    console.log("value:" + obj.value + " id:" + obj.id + " type:" + obj.type + " innerHTML: "+ obj.innerHTML);
                }
        </script>
</body>
</html>

Thanks for your help

felgall · October 27, 2015, 8:36pm

You still have the HTML and JavaScript jumbled together. You should always keep them completely separate.

Also there is no need to pass this to the function as it already knows that value when called correctly.

ofeyofey · October 27, 2015, 9:57pm

Hi,

Yes I will separate out the HTML and javaScript.

You’ve clearly read my mind on this and know exactly what I need next.
So how do I “call this correctly”?
I thought I could replace the function with,

<td>Stas</td><td><button id="student1up" onclick="this;">Up</button></td>

and

console.log(this.id);

Where console.log is not inside a function but inside the script tags.

Thanks

ofeyofey · October 28, 2015, 12:24am

Hi,

Here is my latest attempt to use a value, in this case id, from a button and use it inside script.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Student of the Day</title>
    <style>
    body{
        background-color: rgb(207,218,224);
    }
    div{
        display: inline-block;
        vertical-align: top;
        border: 3px solid rgb(83,95,128);
        border-radius: 6px;
    }
    table{
        background-color: rgb(167,188,188);
        border-radius: 3px;
    }
    button{
        border: 3px solid rgb(83,95,128);
        background: rgb(139,167,180);
        border-radius: 6px;          
    }

    </style>
</head>
<body>
<!-- <input type="color"/> -->
    <div>
        <table>
            <tr>
                <td>Stas</td><td><button id="student1up" onclick="move(this);">Up</button></td>
                <td><button id="student1down" value="Down" onclick="move(this);">Down</button></td></tr>
                <tr><td>Pavel</td><td><button id="student2up" onclick="move(this);">Up</button></td>
                <td><button id="student2down" value="Down" onclick="move(this);">Down</button></td></tr>
                <tr><td>Sasha</td><td><button id="student3up" onclick="move(this);">Up</button></td>
                <td><button id="student3down" value="Down" onclick="move(this);">Down</button></td></tr>
                <tr><td>Dasha</td><td><button id="student4up" onclick="move(this);">Up</button></td>
                <td><button id="student4down" onclick="move(this);">Down</button></td>
                <tr><td>Vlad</td><td><button id="student5up" onclick="move(this);">Up</button></td>
                <td><button id="student5down" value="Down" onclick="move(this);">Down</button></td></tr>
            </tr>
        </table>
    </div>
    <div>
        <canvas id="canvas" width="300" height="500"></canvas>
    </div>
        <script type="text/javascript">
            
            var student = document.getElementsByTagName("student");
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            function move(obj)
                {
                    console.log("value:" + obj.value + " id:" + obj.id + " type:" + obj.type + " innerHTML: "+ obj.innerHTML);
                    return obj.id;
                }

            ctx.stroke;
            ctx.font = "10px Arial";
            ctx.strokeStyle = "Red";
            ctx,lineWidth = 3;
            ctx.rect(100,80,100,300);
            ctx.fillText("id = " + move(), 100, 200);
            ctx.fillText("innerHTML = " + canvas.height, 100, 300);
            ctx.stroke();
            
            /*console.log(document.name1.id);*/
        </script>
</body>
</html>

I get,

TypeError: obj is undefined

on line 56, which is the line

console.log("value:" + obj.value + " id:" + obj.id + " type:" + obj.type + " innerHTML: "+ obj.innerHTML);

Thanks

Paul_Wilkins · October 28, 2015, 12:46am

You have a function that accepts an argument called move:

function move(obj) {

Which you are then calling with no arguments

ctx.fillText("id = " + move(), 100, 200);

So the move variable ends up being undefined.

Solution - when you call the move function, give is an object.

AllanP · October 28, 2015, 1:29am

Another possibility is

if(typeof obj !="undefined"){ctx.fillText("id = " + move(), 100, 200); }

This avoids the first call to move without the object but allows all other calls to proceed.

Paul_Wilkins · October 28, 2015, 1:44am

[quote=“AllanP, post:11, topic:205766, full:true”]Another possibility is

if(typeof obj !="undefined"){ctx.fillText("id = " + move(), 100, 200); }

This avoids the first call to move without the object but allows all other calls to proceed.
[/quote]

I don’t think so. Consider what happens when the obj variable exists. You’ll call move() with no argument and the move function will still have undefined its own obj variable.

It’s better to fix the problem in the first place.

Also, the linewidth line has a syntax error in it too.

AllanP · October 28, 2015, 2:01am

You are right. I was distracted by the console.log display, which works properly. I didn’t think of the ctx.fillText line.

ofeyofey · October 28, 2015, 4:15pm

Hi,
I have given the function a parameter when I call it move(obj).value but still no luck,

        function move(obj)
            {
                console.log("value:" + obj.value + " id:" + obj.id + " type:" + obj.type + " innerHTML: "+ obj.innerHTML);
                return obj;
            }

        ctx.stroke;
        ctx.font = "10px Arial";
        ctx.strokeStyle = "Red";
        ctx,lineWidth = 3;
        ctx.rect(100,80,100,300);
        ctx.fillText("id = " + move(obj).value, 100, 200);
        ctx.fillText("innerHTML = " + canvas.height, 100, 300);
        ctx.stroke();

Still the same error,

ReferenceError: obj is not defined

I have tried many ways of calling it i.e.

ctx.fillText("id = " + move(obj).value, 100, 200);
ctx.fillText("id = " + obj.value, 100, 200);
ctx.fillText("id = " + move(obj.value), 100, 200);

Just to see if any of these work.

Thanks

ofeyofey · October 28, 2015, 4:26pm

Of all the things I could be trying, there actually isn’t a value with this button tag.
Here is all the code,

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Student of the Day</title>
        <style>
    div{
    display: inline-block;
    vertical-align: top;
}
canvas{
    border: 3px solid rgb(83,95,128);
}
</style>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>Sasha</td><td><button id="student1up" onclick="move(this);">Up</button></td>
                <td><button id="student1down" onclick="move(this);">Down</button></td>
            </tr>
            <tr>
                <td>Dasha</td><td><button id="student2up" onclick="move(this);">Up</button></td>
                <td><button id="student2down" onclick="move(this);">Down</button></td>
            </tr>
        </table>
    </div>
    <div>
        <canvas id="canvas" width="300" height="500"></canvas>
    </div>
        <script type="text/javascript">
            function move(obj)
                {
                      return obj;
                }
            console.log(move(obj).id);
        </script>
</body>
</html>

Thanks,

ofeyofey · October 28, 2015, 5:12pm

Why do i get an obj not defined error for,

    function move(obj)
        {
            var num = obj.id;
            /*console.log(obj.id);*/
            return num;
        }

It complains about the line,

   var num = obj.id;

But if I do the following there is no problem,

    function move(obj)
        {
            //var num = obj.id;
            console.log(obj.id);
            //return num;
        }

Seems I can use obj.id in the first situation but not in the other. Why is this?
Thanks

Paul_Wilkins · October 28, 2015, 8:19pm

[quote=“ofeyofey, post:16, topic:205766, full:true”]But if I do the following there is no problem,

    function move(obj)
        {
            //var num = obj.id;
            console.log(obj.id);
            //return num;
        }

Seems I can use obj.id in the first situation but not in the other. Why is this?
[/quote]

Because the problem is being passed off to the console, which has its own series of complaints for you.

My question for you, is why are you doing all of that ctx.stuff code when the page first loads?

ofeyofey · October 28, 2015, 8:45pm

The ctx.stuff was just for the canvas. (But I guess you know that.) I was thinking of using values from button as text in the canvas. But if I could just use these values outside of the move() function.
I would like to click the up or down button beside a persons name and have this control how a shape moves on the canvas.
Thanks

Paul_Wilkins · October 28, 2015, 9:18pm

[quote=“ofeyofey, post:18, topic:205766, full:true”]
The ctx.stuff was just for the canvas. (But I guess you know that.)[/quote]

I ask because currently, it seems that the ctx part of the code runs only when the page loads, and at no other time.

[quote=“ofeyofey, post:18, topic:205766, full:true”]
I was thinking of using values from button as text in the canvas. But if I could just use these values outside of the move() function.[/quote]

When you use the obj variable outside of the move function, when for example the page loads, what object do you intend for it to use?

ofeyofey · October 28, 2015, 9:21pm

So can I not interact with the canvas after the page loads?