Reputation: 45

Very basic Javascript code not functioning

I am new to JavaScript and I am trying to do small exercises to practice the concepts. I am facing an issue on this very basic onClick effect: The text is supposed to expand when you click on the button. The effect isn't applied and the console doesn't display any errors. Here is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link type = "text/css" rel = "stylesheet" href="style.css">
  </head>
  <body>
    <div id="content">
        <p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>

      <p>Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.</p>

      <p>Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.</p>
      <p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>

      <p>Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.</p>

      <p>Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.</p>
    </div>
    <a id="show-more">Show More</a>

  <script type="text/javascript">
var content = document.getElementById("content"); 
var button = document.getElementById("show-more"); 

button.onClick = function() {

  if(content.className == "") {
        content.className = "open";
    button.innerHTML = "Show Less";  
    
  } else {
        content.className = ""; 
    button.innerHTML = "Show More";   
  }
}; 
</script>
  </body>
</html>

CSS:

body {
    background: #605770;
}

#content {
    width: 400px;
    max-height: 270px;
    background: #EDCB96;
    margin: 15px auto; 
    padding: 0 10px 10px;
    font-family: sans-serif;
    font-size: 12px; 
    color: black;
    overflow: hidden;
    -webkit-transition: max-height 0.7s;
    -moz-transition: max-height 0.7s;
    transition: max-height 0.7s;
}

#content.open {
    max-height: 1000px; 
    -webkit-transition: max-height 0.7s;
    -moz-transition: max-height 0.7s;
    transition: max-height 0.7s;
}

#show-more {
    width: 90px;
    height: 20px;
    text-transform: uppercase; 
    font-family: sans-serif;
    font-size: 12px; 
    font-weight: bold; 
    color: #605770;
    background: #EDCB96;
    border: 1px solid #F7C4A5; 
    margin: 15px auto;
    display: block;
    text-align: center;
    padding: 2px 5px;
    cursor: pointer;
}

I have also tried to put my JavaScript in a separated file and link it on the HTML, but it doesn't help.

Upvotes: 2

Answers (3)

Natraj

Reputation: 1

@askhan. It's very simple to solve the issue.

Practice makes you a good developer :)

Just you add the onclick function in the anchor Tag "a"

I used textSwap() function name. eg: Show More

Run that below code you get the output:

enter code here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link type = "text/css" rel = "stylesheet" href="style.css">
  </head>
  <body>
    <div id="content">
        <p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>

      <p>Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.</p>

      <p>Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.</p>
      <p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>

      <p>Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.</p>

      <p>Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.</p>
    </div>
    <a id="show-more" onclick="textSwap();">Show More</a>

<script type="text/javascript">
    var content = document.getElementById("content");
    var button = document.getElementById("show-more");

    function textSwap() {
        if (content.className == "") {
            content.className = "open";
            button.innerHTML = "Show Less";

        } else {
            content.className = "";
            button.innerHTML = "Show More";
        }
    };
</script>
  </body>
</html>

Upvotes: 0

Rafi Ud Daula Refat

Reputation: 2257

Just you need to change onClick() to onclick(). You can find details here onclick

Upvotes: 0

Ashkan Mobayen Khiabani

Reputation: 34150

Change onClick to onclick:

 button.onclick = function() {

      if(content.className == "") {
            content.className = "open";
        button.innerHTML = "Show Less";  

      } else {
            content.className = ""; 
        button.innerHTML = "Show More";   
      }
    };

Upvotes: 1

Very basic Javascript code not functioning

Answers (3)

Related Questions