1. Forum
  2. Usenet
  3. COMP.LANG.JAVASCRIPT

  • How come I don't get a box when I add an eventlistener?

    From chad altenburg@21:1/5 to All on Wed Feb 9 09:42:46 2022
    When I comment out the event listener code, I get a black box. However, when I don't, I don't get a black box. Why?

    <html>
    <canvas id = "canvas"></canvas>
    <script>
    var x = 20;
    var y = 20;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var i =0;

    addEventListener();

    function drawSnake()
    {
    for (i = 0; i < 20; i++) {
    ctx.fillRect(x, y, 25, 25);
    }
    }

    drawSnake();

    function addListener() {
    document.addEventListener('keydown', function(e)) {
    switch(e.keycode) {
    case 37: break; //left
    case 38: break; //up
    case 39: break; //right
    }
    }
    }



    //ctx.fillRect(50, 100, 150, 150);
    // }

    </script>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Ben Bacarisse@21:1/5 to chad altenburg on Wed Feb 9 21:53:33 2022
    chad altenburg <cdalten@gmail.com> writes:

    When I comment out the event listener code, I get a black
    box. However, when I don't, I don't get a black box. Why?

    Because there is a syntax error. The code can't run if the interpreter
    can't make sense of what you've written.

    <html>
    <canvas id = "canvas"></canvas>
    <script>
    var x = 20;
    var y = 20;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var i =0;

    addEventListener();

    Remove this as well. It will cause a run-time error.

    function drawSnake()
    {
    for (i = 0; i < 20; i++) {
    ctx.fillRect(x, y, 25, 25);
    }
    }

    drawSnake();

    function addListener() {
    document.addEventListener('keydown', function(e)) {

    That second ) is in the wrong place.

    switch(e.keycode) {
    case 37: break; //left
    case 38: break; //up
    case 39: break; //right
    }
    }

    It should be here (along with a semicolon)..

    }



    //ctx.fillRect(50, 100, 150, 150);
    // }

    </script>
    </html>

    --
    Ben.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Arno Welzel@21:1/5 to All on Thu Feb 10 14:55:25 2022
    chad altenburg:

    When I comment out the event listener code, I get a black box. However, when I don't, I don't get a black box. Why?

    Because you have an error in your code. You write:

    addEventListener();

    However this function does not exist. I assume it should be:

    addListener();

    Next time please check the web developer console of your browser (F12)
    and select "Console" to see error messages caused by your script.


    --
    Arno Welzel
    https://arnowelzel.de

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From chad altenburg@21:1/5 to Ben Bacarisse on Thu Feb 10 10:18:47 2022
    On Wednesday, February 9, 2022 at 1:53:46 PM UTC-8, Ben Bacarisse wrote:
    chad altenburg <cda...@gmail.com> writes:

    When I comment out the event listener code, I get a black
    box. However, when I don't, I don't get a black box. Why?
    Because there is a syntax error. The code can't run if the interpreter
    can't make sense of what you've written.
    <html>
    <canvas id = "canvas"></canvas>
    <script>
    var x = 20;
    var y = 20;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var i =0;

    addEventListener();
    Remove this as well. It will cause a run-time error.
    function drawSnake()
    {
    for (i = 0; i < 20; i++) {
    ctx.fillRect(x, y, 25, 25);
    }
    }

    drawSnake();

    function addListener() {
    document.addEventListener('keydown', function(e)) {
    That second ) is in the wrong place.
    switch(e.keycode) {
    case 37: break; //left
    case 38: break; //up
    case 39: break; //right
    }
    }
    It should be here (along with a semicolon)..
    }



    //ctx.fillRect(50, 100, 150, 150);
    // }

    </script>
    </html>
    --

    And I still don't get why it's not detecting the right arrow key...

    <html>
    <canvas id = "canvas" width = "400" height="400"></canvas>
    <script>
    var x = 20;
    var y = 20;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var i =0;

    //addEventListener();

    function main() {
    drawSnake();
    addEventListener();
    }

    main();

    function drawSnake()
    {
    for (i = 0; i < 20; i++) {
    ctx.fillRect(x, y, 25, 25);
    }
    }

    function addListener() {
    document.addEventListener('keydown', function(e){
    switch(e.keyCode) {
    case 37: break; //left
    case 38:
    //ctx.fillRect(x, y + 10, 25, 25)
    break; //up
    case 39:
    ctx.fillRect(x + 10, y, 25, 25);
    alert("key moved right");
    break; //right
    case 40: break;
    }

    });

    }



    //ctx.fillRect(50, 100, 150, 150);
    // }

    </script>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Ben Bacarisse@21:1/5 to chad altenburg on Thu Feb 10 19:47:04 2022
    chad altenburg <cdalten@gmail.com> writes:

    On Wednesday, February 9, 2022 at 1:53:46 PM UTC-8, Ben Bacarisse wrote:
    chad altenburg <cda...@gmail.com> writes:

    When I comment out the event listener code, I get a black
    box. However, when I don't, I don't get a black box. Why?
    Because there is a syntax error. The code can't run if the interpreter
    can't make sense of what you've written.
    <html>
    <canvas id = "canvas"></canvas>
    <script>
    var x = 20;
    var y = 20;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var i =0;

    addEventListener();
    Remove this as well. It will cause a run-time error.
    function drawSnake()
    {
    for (i = 0; i < 20; i++) {
    ctx.fillRect(x, y, 25, 25);
    }
    }

    drawSnake();

    function addListener() {
    document.addEventListener('keydown', function(e)) {
    That second ) is in the wrong place.
    switch(e.keycode) {
    case 37: break; //left
    case 38: break; //up
    case 39: break; //right
    }
    }
    It should be here (along with a semicolon)..
    }



    //ctx.fillRect(50, 100, 150, 150);
    // }

    </script>
    </html>
    --

    And I still don't get why it's not detecting the right arrow key...

    It still has errors, and you still have mixed up names.

    You can't program like this. You need to learn to find this sort of
    basic error for yourself or you will be posting here 20 times a day.
    Find out how to get help for yourself. Do you know how to view the
    console in your browser?


    <html>
    <canvas id = "canvas" width = "400" height="400"></canvas>
    <script>
    var x = 20;
    var y = 20;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var i =0;

    //addEventListener();

    function main() {
    drawSnake();
    addEventListener();
    }

    main();

    function drawSnake()
    {
    for (i = 0; i < 20; i++) {
    ctx.fillRect(x, y, 25, 25);
    }
    }

    function addListener() {
    document.addEventListener('keydown', function(e){
    switch(e.keyCode) {
    case 37: break; //left
    case 38:
    //ctx.fillRect(x, y + 10, 25, 25)
    break; //up
    case 39:
    ctx.fillRect(x + 10, y, 25, 25);
    alert("key moved right");
    break; //right
    case 40: break;
    }

    });

    }



    //ctx.fillRect(50, 100, 150, 150);
    // }

    </script>
    </html>

    --
    Ben.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From chad altenburg@21:1/5 to Ben Bacarisse on Thu Feb 10 19:13:52 2022
    On Thursday, February 10, 2022 at 11:47:17 AM UTC-8, Ben Bacarisse wrote:
    chad altenburg <cda...@gmail.com> writes:

    On Wednesday, February 9, 2022 at 1:53:46 PM UTC-8, Ben Bacarisse wrote:
    chad altenburg <cda...@gmail.com> writes:

    When I comment out the event listener code, I get a black
    box. However, when I don't, I don't get a black box. Why?
    Because there is a syntax error. The code can't run if the interpreter
    can't make sense of what you've written.
    <html>
    <canvas id = "canvas"></canvas>
    <script>
    var x = 20;
    var y = 20;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var i =0;

    addEventListener();
    Remove this as well. It will cause a run-time error.
    function drawSnake()
    {
    for (i = 0; i < 20; i++) {
    ctx.fillRect(x, y, 25, 25);
    }
    }

    drawSnake();

    function addListener() {
    document.addEventListener('keydown', function(e)) {
    That second ) is in the wrong place.
    switch(e.keycode) {
    case 37: break; //left
    case 38: break; //up
    case 39: break; //right
    }
    }
    It should be here (along with a semicolon)..
    }



    //ctx.fillRect(50, 100, 150, 150);
    // }

    </script>
    </html>
    --

    And I still don't get why it's not detecting the right arrow key...
    It still has errors, and you still have mixed up names.

    You can't program like this. You need to learn to find this sort of
    basic error for yourself or you will be posting here 20 times a day.
    Find out how to get help for yourself. Do you know how to view the
    console in your browser?


    With all due respect, go fuck yourself.

    <html>
    <canvas id = "canvas" width = "400" height="400"></canvas>
    <script>
    var x = 20;
    var y = 20;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var i =0;

    //addEventListener();

    function main() {
    drawSnake();
    addEventListener();
    }

    main();

    function drawSnake()
    {
    for (i = 0; i < 20; i++) {
    ctx.fillRect(x, y, 25, 25);
    }
    }

    function addListener() {
    document.addEventListener('keydown', function(e){
    switch(e.keyCode) {
    case 37: break; //left
    case 38:
    //ctx.fillRect(x, y + 10, 25, 25)
    break; //up
    case 39:
    ctx.fillRect(x + 10, y, 25, 25);
    alert("key moved right");
    break; //right
    case 40: break;
    }

    });

    }



    //ctx.fillRect(50, 100, 150, 150);
    // }

    </script>
    </html>
    --

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From The Natural Philosopher@21:1/5 to chad altenburg on Fri Feb 11 17:37:18 2022
    On 11/02/2022 03:13, chad altenburg wrote:
    On Thursday, February 10, 2022 at 11:47:17 AM UTC-8, Ben Bacarisse wrote:

    And I still don't get why it's not detecting the right arrow key...
    It still has errors, and you still have mixed up names.

    You can't program like this. You need to learn to find this sort of
    basic error for yourself or you will be posting here 20 times a day.
    Find out how to get help for yourself. Do you know how to view the
    console in your browser?


    With all due respect, go fuck yourself.

    OK, bye then. ...

    Sort your own shit out and don't come here expecting a free tutorial :
    No one here is paid to wipe your bottom.

    Before the Internet I tried to teach myself to program in Assembler. I
    wrote two pages and it simply wouldn't assemble. I copied a section from
    the computer manual and that wouldn't assemble either. It took me *three
    days* to guess that the example in the book had been typeset to look
    nice with indented margins, and the assembler didn't like all the
    indented margins I had religiously typed in.

    Chad is being really quite polite: And factual. You have to learn to
    crawl before you can walk, No one knows a better simpler or easier way
    than that.

    And whilst you may be able to get help from parents or teachers by the
    simple expedient of "thcweaming and thcweaming until you are thick",
    that sort of Violent Elizabeth Bott strategy simply has people reaching
    for the kill file.

    You appear to be unable to accept you aren't as smart as you thought you
    were. Well hello...your next life lessons is not to shit on the hand
    extended to help you.

    He who shits in the road will meet flies on his return



    --
    If you tell a lie big enough and keep repeating it, people will
    eventually come to believe it. The lie can be maintained only for such
    time as the State can shield the people from the political, economic
    and/or military consequences of the lie. It thus becomes vitally
    important for the State to use all of its powers to repress dissent, for
    the truth is the mortal enemy of the lie, and thus by extension, the
    truth is the greatest enemy of the State.

    Joseph Goebbels

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Arno Welzel@21:1/5 to All on Sat Feb 12 18:05:42 2022
    chad altenburg:

    On Thursday, February 10, 2022 at 11:47:17 AM UTC-8, Ben Bacarisse wrote:
    [...]
    You can't program like this. You need to learn to find this sort of
    basic error for yourself or you will be posting here 20 times a day.
    Find out how to get help for yourself. Do you know how to view the
    console in your browser?


    With all due respect, go fuck yourself.

    With all due respect - learn to use your tools!


    --
    Arno Welzel
    https://arnowelzel.de

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)