0

I'm new to Javascript and currently doing a course. I have to deal with this problem and after testing just about all of my very limited knowledge on it, I can not make any progress on the issue. I am supposed to "create an HTML element for the given url" and it must accomplish the following:"

  • Remove leading/trailing whitespace from src before you use them

  • The src and width attribute values should be wrapped in double-quotes (e.g., src="..." width="...")

  • There should be a single space between the end of one attribute and start of the next (e.g., src="..." width="..." controls)

  • The width attribute should only be added if a valid integer value (number or string) is included. Otherwise ignore it."

the code I have is as follows:

function createVideo(src, width, controls) {

  let video;
  if (controls === false && width === true) {
    video = `<video src ="${src.trim()}" width = "${width}" controls></video>`;
  }
  if (controls === false && width === true) {
    // this is where I left off, for some reason the controls = and width = are not triggering correctly
    video = `<video src ="${src.trim()}" width = "${width}"></video>`;
  }
  if (controls === true && width === false) {
    video = `<video src = "${src.trim()}" controls></video>`;
  }
  if (controls === false && width === false)
    video = `<video src ="${src.trim()}"></video>`;
  console.log(video);
}
createVideo(
  "http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4",
  500,
  false
);

the issue I am having is my if statements do not trigger correctly and I have no Idea as to why. Also I have tried "if else" as well if that makes a difference.

Crimson
  • 11
  • 2
    `width` never equals `true` or `false`, it equals `500`. So all of your `if` conditions successfully evaluate to `false`. – David Feb 16 '23 at 20:16
  • 1
    Why do you have two separate `if`s with the same condition (controls false and width true)? Also, based on your call, `width` is a number; why are you checking to see if it's `true` or `false`? And when checking a boolean, you never need `===`; just use e.g. `if (!controls)` to check if it's false, `if (controls)` to check if it's true. The whole point of `===` is to compare two values and produce a Boolean result, but in this case you already have a Boolean to start with! – Mark Reed Feb 16 '23 at 20:16
  • Your first two if conditionals are the same, plus you should not be using '===' for width, since width would not be a bool – johnkhigginson Feb 16 '23 at 20:16
  • @WOUNDEDStevenJones in what way does that answer the question here? Neither `===` nor `==` are OK here when comparing number and boolean. A loose equals is *more wrong* than the strict equal which is already wrong. – VLAZ Feb 16 '23 at 20:19
  • @WOUNDEDStevenJones also "*width == true is true*" **is absolutely not correct**! This is **very** misleading. The result is `false` and it's nothing to do with truthy/falsy - the abstract equality comparison between number and boolean will convert the boolean to number and then compare so `500 == true` -> `500 == Number(true)` -> `500 == 1` -> `false`. Thus, the result is not `true` as you claim. – VLAZ Feb 16 '23 at 20:23
  • @TimLewis can you explain why `==` is correct here? – VLAZ Feb 16 '23 at 20:51
  • @VLAZ you're right, I mentally skipped a step because `if (50 === true)` is false but `if (50)` is true (which I incorrectly mentally short-circuited to `if (50 == true)` being the same). I was thinking of `if (50)` but was trying to show it in a simple way including their equality comparison. But IMO the duplicate question is still valid because their issue is `===` when using different variable types. Yes, `==` does **not** directly solve it in this instance, but it does point to one of the issues with their code. The other option would be closing a "typo". – WOUNDEDStevenJones Feb 16 '23 at 21:01
  • @WOUNDEDStevenJones is or isn't `==` an answer to the question? Because *that* is what a duplicate is. If it isn't, then the dupe closure is wrong. I see no actual reason where it would be correct. Yet three different people are claiming `==` somehow directly answers the question. IMO, the duplicate is completely wrong and highly misleading. It's *barely* relevant but misses the forest for the trees. Unless somebody either comes up with a better one or explains why this one should be kept, I'll be reopening the question. – VLAZ Feb 16 '23 at 21:10
  • In my previous comment I already addressed that `==` does not directly solve their problem, but the top answer on the duplicate question does. "The strict equality operator (`===`) [...] types must be the same to be considered equal." and "so if two values are not the same type `===` will simply return false". Both of these directly point to the issue here that `500` is being strictly compared to `true` or `false`, in which case it's always false, and that is why these conditionals are not working as expected. – WOUNDEDStevenJones Feb 16 '23 at 21:15
  • @WOUNDEDStevenJones there is nothing there about "*a valid integer value (number or string)*" which is what this question is about. When somebody says "Guys, I shot myself in the foot" the reply shouldn't really be "Duh, you're holding a gun". Our trained eyes can see that's a gun. Not really the point of the whole thing though. – VLAZ Feb 16 '23 at 21:18
  • @VLAZ Sorry, went to respond to your comment multiple times but was interrupted; you are correct; I too was thinking along the lines of `if(width)` vs `if(width == true)`; `==` and `===` are both incorrect in this case. Proper check would be something like `if(controls && width)` (or similar, `width > 0`, etc). JS isn't my primary language, and other languages _do_ properly (or improperly, depending on your point of view) evaluate `if(width == true)` (`true`) vs `if(width === true)` (`false`) for non-zero values. I'll remove my original comment; you guys have addressed the rest. Cheers! – Tim Lewis Feb 16 '23 at 22:30

0 Answers0