Change test by window size

[bobstokes]

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 --->

[davej]

Try...

var wiw = window.innerWidth; 

Although you can still get into trouble with mobile devices due to pixel ratios.

[Ingolme]

What you change the text to "Call me" you're also removing the link that was inside.

 

Your code does the following:

When the width is greater than 1024:

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

When the width is less than 1024:

<button id="phone" class="button">Call me</button>

It's not a good idea to put a link inside a button, try styling the link with CSS to make it look like a button instead.