Bind event to input buttons

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.

1 Like

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

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

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.

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. :grinning:

[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. :grinning:
[/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.

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

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

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,

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

[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?

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

[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?

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

Yes you can indeed, you just need to issue the instructions on the appropriate events after the page loads.

1 Like

Ok good! Can the event be a button click? Say I have a shape just a rectangle for each person. And I can click up or down to move them up or down in the canvas, one step. That is what i am working toward.
If I could get the id of the button, would which shape to move and whether to move it up or down.
Thanks

What you seem to be wanting to do, would be much easier to achieve by moving around on-page elements instead.

If though you want to carry on with the canvas, someone else will have to become involved with guiding you through how to achieve that. I can though point you to the following Canvas tutorial.

Paul thanks for the link. I am quite familiar with the canvas.
Maybe I need to learn about events. What do you think? Would that be a useful direction?
Thanks again

Hi,

I am now trying to solve this problem using an eventListener.

I have continued this on another thread,

Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.