First Javascript Project

Question

I just started on my first JavaScript project which is a small script to detect the browser window size, and if it is below 1100px then the div quick will not be shown.

Here is my code:

<Script language="Javascript">
  function toggle(id) {
    var browserwidth =  window.screen.width;
    if (browserwidth <= 1100) {
      document.getElementByID(quick).style.display = 'none';
    } else {
      document.getElementById(quick).style.display = 'block';
    }
  }
</script>

but I cannot figure out for the life of me my it does not work. I am fully aware that css @media could do what I am trying to do but it would not work for the current project I am working on.

You haven't declared the quick variable. Or is it supposed to be a string "quick"? — Jim Blackler
– Jim Blackler, Commented Mar 4, 2012 at 14:52
Also note that you have a start tag <Script> and an end tag </script>. Although HTML is not case sensitive the case of corresponding start an end tags should mach afaik (even if this is not the case it makes it easier to read ;)). — Felix Kling
– Felix Kling, Commented Mar 4, 2012 at 14:54

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

You have no variable called quick. We assume that should be a quoted string 'quick':

if (browserwidth <= 1100) {
  document.getElementByID('quick').style.display = 'none';
} else {
  document.getElementById('quick').style.display = 'block';
}

For debugging JavaScript, the Firefox extension Firebug is recommended, or Chrome & Safari's Developer Tools console. When you run the script, errors will be printed to the console and although they won't usually tell you the exact problem, they'll usually identify where the problem occurs.

Update

After seeing the implementation on pastebin, your code is not executing because, well, you aren't executing it. Your function has been correctly defined but is not being triggered by any event. Bind it to a button onclick or window.onresize to test its functionality:

<button onclick="toggle('quick');">Click to toggle</button>

I have also used the input parameter of your function (id) to dynamically choose the div, rather than hard-coding 'quick':

function toggle(id) {
  var browserwidth =  window.screen.width;
  if (browserwidth <= 1100) {
    // Use id here...
    document.getElementByID(id).style.display = 'none';
  } else {
    document.getElementById(id).style.display = 'block';
  }
}
// For completeness, additional info ported in from comments:

// Function to call toggle()
function init() {
  toggle("quick");
} 
// Attach it to the window.onload event so it fires when the page load completes
window.onload = init;

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 4, 2012 at 14:53

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Michael Berkowski Over a year ago

@Charlie then it must be quoted as a string as I've done above. without quotes, it is assumed to be a variable which was never defined.

Michael Berkowski Over a year ago

@Charlie You defined the function correctly but didn't execute it. See addition above.

Charlie Over a year ago

so how could I make that run at page load? is there an on.load?

Edwin Over a year ago

@Charlie Just add these lines: function init() { toggle("quick"); }, followed by window.onload = init();.

Felix Kling Over a year ago

@Edwin: Well, if you add the parenthesis, it calls the function immediately. If you do this in the head of the page and you want to access DOM elements it won't work. If you call it at the end of the page it does not matter. You don't even have to use window.onload then (unless you want to access image data).

|

Rob W · Accepted Answer · 2012-03-04 14:52:41Z

2

You haven't defined quick yet. If it's not a variable, enclose it within quotes.

HTML tags are not case-sensitive, but please be consistent. Use lowercase script. Also, the language attribute is ancient. Remove it.

PS. A great place to learn (JavaScript) is ~~W3schools.com~~ https://developer.mozilla.org/ (Guide).

answered Mar 4, 2012 at 14:52

Rob W

350k87 gold badges811 silver badges683 bronze badges

Comments

HolyThunder · Accepted Answer · 2012-03-04 15:23:42Z

2

When you use document.getElementById the "quick" should be inside quotes, document.getElementById('quick')

This should work. It uses some JQuery, but it's not required. the $(function (){}); is just a faster way to make it load after the DOM (webpage itself) has loaded.

edited Mar 4, 2012 at 15:23

answered Mar 4, 2012 at 14:57

HolyThunder

4631 gold badge6 silver badges18 bronze badges

1 Comment

HolyThunder Over a year ago

Thing is, you create that function, that takes a parameter, but never actually call said function / use the id parameter inside the function. So, besides not needing said parameter, since you harcode it into the code, you never actually call the function. I'll send you a jsfiddle in a moment.

Collectives™ on Stack Overflow

First Javascript Project

3 Answers 3

Update

7 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related