Change button text by window size

JavaScript
1

I am trying to change the button text to Call Me when the browser window is 1024 pixels or LESS.
The code below works fine until I add the if wi variable.
Does anybody have any ideas for making this work?

<button id="phone" class="button"><a href="tel:6144788011" title="Call Advanced Systems">614-478-8011</a></button>

<!--- Begin Call Button Script --->
<script>
	var changeText = document.getElementById("phone");
	var wi = document.width;
	if(wi <= 1024){
	changeText.innerHTML = "Call Me";
	}
</script>
<!--- End Call Button Script --->
2

Try this instead:

var wi = window.innerWidth;

I wouldn’t use an <a> inside a <button>, though. Use one or the other.

3

Yes, I tried that,
Thanks for trying to help.
Any more ideas?

4

Are you saying it doesn’t work? It works for me. In what circumstances doesn’t it work for you?

If you are expecting it to work as you resize the browser window, you’ll need to add an event listener. But if you leave the code as is, you’ll have to resize the browser and then refresh the page.

5

It doesn’t work with the “if” statement included.
Without the if statement it changes all the button text with the id of phone no matter what size device you look at it on.
I know that an event handler, or at least an “onResize” is necessary for it to work without a refresh.

I have tried this in an external js file and onpage js.

I have reworked the code as many ways as possible in an to attempt to make it work.

In what environment are you testing the code. Is it possible that something in the html5 is causing this issue?

Thanks for addressing this issue with me. It really has me bewildered.

6

Hm, strange. This code worked fine for me, tested locally on my Mac in the various browsers I have there:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>

<button id="phone" class="button"><a href="tel:6144788011" title="Call Advanced Systems">614-478-8011</a></button>

<!-- Begin Call Button Script -->
<script>
	var changeText = document.getElementById("phone");
	var wi = window.innerWidth;
	if(wi <= 1024){
	changeText.innerHTML = "Call Me";
	}
</script>

</body>
</html>

EDIT: It might be your slightly malformed HTML comment that is breaking the script? Change this:

<!--- Begin Call Button Script --->

to this:

<!-- Begin Call Button Script -->
7

Well if that don’t beat all! THAT DID IT!
It is difficult to comprehend exactly why that would affect the code. I use the same format of comment throughout my websites and have had no problem.
How did you come up with that? Excellent problem solving skills you have there.

It changed my button in the less than 1024 windows so I took the ID off the button and put it directly onto the attribute and it works great.

I thank you very much for your assistance. I may never have figured that one out.

I will be watching for it in the future, though.

8

Hah, glad I could help.

Actually, not so impressive. When I pasted your code into my editor (SublimeText2) the script was grayed out, which seemed strange. I tinkerd, and realised that it was the comment above that was causing it. Amending the comment made the script all nice and colorful again. So, as you see, not especially high tech. :stuck_out_tongue:

Anyhow, I guess it’s a lesson that it’s important to stick to this format for comments—with at least a space on either side for anything inside:

<!--  [at least one space either side of your comments]  -->