If URL contains this string then hide div?

JavaScript
1

How do I show/hide a div based upon a number located anywhere in the URL such as ‘1234’?

Thank you

2 
if (window.location.search.search(/1234/)) document.getElementById('idofthedivtohide').display = 'none'
3

this is the code I used:
<script>
if (window.location.search…search(/1234/)) document.getElementById(‘notBarEnds’).display = ‘none’
</script>
<div id=“notBarEnds”>this is not bar ends</div>

But it doesn’t seem to work. This a URL example that I used:
http://website.com/product/s1234/martini-glass.html

any ideas why its not working for me?

Thanks

4

window.location.search contains only the querystring part (including the question mark) of the URL. In your case it would be blank, since you don’t have a querystring at all.

http://website.com/product/s1234/martini-glass.html?test=1234, for instance, would work.

There could also be a problem with using search(), since that will return the position of the first occurance of the value you’re searching for. If you’re searching for “1234” in a string with search() and the string you’re searching in starts with “1234”, the position returned would be 0, which would make the if statement return false. Probably not what you want.

You could do it like this instead:

if (/1234/.test(window.location.href)) {
	document.getElementById('notBarEnds').display = 'none';
}
5

Even once you get your code the way you need it won’t work as you’re targeting an element that doesn’t exist in the DOM yet as fas as your JavaScript is concerned, you need to execute your <script> code after your <div> otherwise you will get undefined errors if you look in your browsers developer console.

6

Script tags should always go just before the </body> tag - there should never be any page content below them.

There are a couple of exceptions where the script goes in the head but those don’t interact with the content of the page.

7

Tried the below code neither one worked. Any ideas?


<!doctype html>
<html>
  <head>
    <title>My Uploads</title>
    <link rel="stylesheet" href="my_uploads.css" />
  </head>
  <body>
<div id="notBarEnds">this is not bar ends</div>  
  <script>
if (window.location.search..search(/123/)) document.getElementById('notBarEnds').display = 'none'
</script>

</body>
</html>





<!doctype html>
<html>
  <head>
    <title>My Uploads</title>
    <link rel="stylesheet" href="my_uploads.css" />
  </head>
  <body>
<div id="notBarEnds">
this is not bar ends
</div>  


  <script>
if (/1234/.test(window.location.href)) {
	document.getElementById('notBarEnds').display = 'none';
}
</script>
 
</body>
</html>
8 
document.getElementById('notBarEnds').display = 'none';

should be

document.getElementById('notBarEnds').style.display = 'none';

Don’t know how I managed to get that wrong the first time. Anyhow, change that line in the second example and it should hopefully work. :slight_smile:

9

@CletusSpuckler worked like a charm now. Guess it was just missing the style? But now I have one last request, how would I add multiple checks, for instance:

if (/56722/ || /67781/.test(window.location.href)) {document.getElementById(‘notBarEnds’).style.display = ‘none’;}

The above is my attempt at saying 56722 or 67781 haha.

In other words how can I add multiple number checks?

Thanks for the help by the way guys.

10 
if (/56722|67781/.test(window.location.href)) {
11

Thank you CletusSpuckler it worked perfect, I really appreciate it.

12

Is there a way to do this with a span tag? I have only ever seen - getElementById & getElementsByClassName (<which doesn’t seem to work for the span class)

<span class=“myClass”>This is what I need to hide</span>

document.getElementById('notBarEnds').style.display = 'none';

Thanks

13

What about straight CSS?

CSS

#hidden {display:none;}

body form[action="someurl.html?1234"] #hidden {display:block;}

HTML

<a href="someurl.html?1234">some page</a>

<div id="hidden">

And if you need to change the action URL dynamically just put the CSS in the page head and Bob’s someone’s uncle.

:slight_smile: