Why won't it WORK?


#1


https://www.codecademy.com/IsaIce/codebits/loaY5i

So, I'm working on a very important project, and I need some real help. The code below won't work! All of the html and css values needed in the code are defined and built on (yes, shapeOne and shapeTwo do have a border-radius aspect in the css, and I've tested it to make sure it works properly). Plz, HELP!


nultronTeacher.addEventListener("click", function () {
     var nultronCallName = prompt("What is it that these things have in common?\nThey are both (a):")
     if ((document.getElementById('shapeOne').style.borderRadius === "0px") && (document.getElementById('shapeTwo').style.borderRadius === "0px")){
         document.write("Sucess!")
     } else {
         document.write("well...")
    }
});


#2

This is for a codebit I'm working on.


#3

Uncaught SyntaxError: Invalid or unexpected token

78   var testMem = ("red

script.js:106 Uncaught SyntaxError: Unexpected token }

105      if ([x][0] === 
106  });

This is the code I've modified to get this program to run with no console errors.

    for (x in nultronMemory){
        if ([x][0] === userRequest) {

        }
    }
});

I've found a number of concerns in the logic which is going to take a lot of explaining. I hope code samples go a long way in performing this function.

The biggest concern is the dblclick listener. This is a crapshoot that a user can only succeed at after many attempts. Not a very user friendly approach, and definitely not to accessibility standards. A rethink is needed.

Toggling is the usual approach. Consider,

// Cache the principal objects

var shapeOne = document.getElementById("shapeOne");
var shapeTwo = document.getElementById("shapeTwo");
 
var bgColor, shape;

// ...

//Changing Shape One's shape

buttonS1S.addEventListener("click", function () {
    shapeOne.style.borderRadius = "100px";
});
buttonS1S.addEventListener("dblclick", function () {
    shapeOne.style.borderRadius = "0px";
});

With a toggle...

buttonS1S.addEventListener("click", function () {
    shape = shapeOne.style.borderRadius;
    if (shape === '0px') {
        shapeOne.style.borderRadius = "100px";
    } else {
        shapeOne.style.borderRadius = "0px";
    }
});

No need for the double click.

The ternary of the above if would be,

shapeOne.style.borderRadius = shape === '0px' ? "100px" : "0px";

#4

We can see a lot of event listeners in your project code. JavaScript lets us tidy this up with event bubbling and delegation. Ignore the above post while considering the following:

All the code above this line,

var nultronMemory = new Array(['A','B'],['C','D'])

has been replaced with this,

function colorPicker (color) {
    switch (color) {
    case 'black': return 'red';
    case 'red': return 'orange';
    case 'orange': return 'yellow';
    case 'yellow': return 'green';
    case 'green': return 'blue';
    case 'blue': return 'red';
    }
}

var table = document.getElementsByTagName('table')[0];

table.addEventListener("click", function (e) {
  if (e.target && e.target.matches('button.shape')) {
    var el = document.getElementById("shape" + e.target.classList[1]);
    var shape = el.style.borderRadius;
    el.style.borderRadius = shape === '100px' ? "0px" : "100px";
  }
  else if (e.target && e.target.matches('button.color')) {
    var el = document.getElementById("shape" + e.target.classList[1]);
    var color = el.style.backgroundColor || 'black';
    el.style.backgroundColor = colorPicker(color);
  }
});

The HTML has been modified as follows:

<tr>
<td><button type="button" class="color One">Click to change color of shape one</button></td>
<td><button type="button" class="color Two">Click to change color of shape two</button></td>
<td><button type="button" id="nultronTeacher">Click to teach Nultron about the shapes</button></td>
</tr>
<tr>
<td><button type="button" class="shape One">Click to change shape of shape one</button></td>
<td><button type="button" class="shape Two">Click to change shape of shape two</button></td>
<td><button type="button" id="nultronRequester">Click to make a request to Nultron</button></td>
</tr>

I haven't done any work on the lower portion of code so the nultonBox is not included in this, yet.

Explanation

The ID attributes have been removed from the buttons and replaced with classes, color, shape, One and Two.

There is only one event listener with bindings to the TABLE parent element. Click events anywhere in the table will bubble up to the parent, after which the target element is detected and the event handler delegated to that element.

The shape object is identified by the class name 'One', 'Two', etc., and the shape action by the class name 'color' and 'shape'.

As you can see there is no limit on the number of shapes, so long as their buttons have a number class which is second in the list. We can even add new shape objects dynamically and the event listener will delegate to them as though they were in the source code at load time. This is a very efficient way to handle events.

Save you original work to a local file, and then replace the JavaScript in the top half with the code above. It's not a bad idea to use someone else's code, so long as you remember to credit them in a comment. Not crediting them is plagiarism. Include a link back to this topic.

Be sure to move the <body> tag up to just below </head>, and replace the HTML segment with the above.

To make your program really exciting once you have all the wrinkles ironed out, consider how one might include more shapes than square and circle.

http://1stwebdesigner.com/css-shapes/


#5

Thanks, bro(I'm assuming)! I didn't use your code, but it gave me some great ideas, and now my program is working!


#6

You still haven't moved your <body> tag.

<body>

</body>
</html>

A valid HTML document includes two important elements in the HEAD

<head>
    <meta charset="UTF-8">
    <title>Nultron</title>

#7

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