Change text on screen size

Question

How to change text in a div if the screen is less than..?

<a href="#">View full profile</a>
if(screen <= 768) {
   <a href="#">View</a>
}

Sorry I'm new to Javascript. I've seen similar questions around but any of them has a correct answer.

I know I could use css to achieve this but I don't want to repeat the html code just to hide/show elements.

Answer 1

Html:

<a id="viewLink" href="#">View full profile</a>

Javascript:

// Get the window width
if (window.innerWidth < 768) {

    // If less than 768
    document.getElementById('viewLink').innerText = 'View';
    // Change the link text to View.
}

Answer 2

Script

if (window.innerWidth < 768) {
document.getElementById('viewLink').innerText = 'View'; 
}

and HTML

<a id="viewLink" href="#">View full profile</a>

Answer 3

Try using media queries like here:

//css
@media screen and (max-width: 768px) {
    .tablet {
        display: none; 
    } 
}
@media screen and (min-width: 769px) {
    .phone { 
        display: none;
    }
}

//html
<a href="#" class='tablet'>View full profile</a>
<a href="#" class='phone'>View</a>

Answer 4

You can try this method...

 if (window.innerWidth < 768) { $('#hide').hide(); } 

 <a href="#">View <span id="hide">full profile</span></a> 

Answer 5

  <a id="viewText" href="#">View full profile</a>
    <script type=text/javascript>
    $(document).ready(function () {

        if (screen.width < 768) {
            $("#viewText").show();
        }
        else {

            $("#viewText").hide();
        }

    });
    </script>