bobstokes Posted September 18, 2014 Share Posted September 18, 2014 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 ---> Link to comment Share on other sites More sharing options...
davej Posted September 18, 2014 Share Posted September 18, 2014 Try... var wiw = window.innerWidth; Although you can still get into trouble with mobile devices due to pixel ratios. Link to comment Share on other sites More sharing options...
Ingolme Posted September 18, 2014 Share Posted September 18, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now