Very basic Javascript code not functioning

Question

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.

Ashkan Mobayen Khiabani · Accepted Answer · 2016-08-27 23:04:51Z

1

Change onClick to onclick:

 button.onclick = function() {

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

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

answered Aug 27, 2016 at 23:04

Ashkan Mobayen Khiabani

34.3k35 gold badges111 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rafi Ud Daula Refat · Accepted Answer · 2016-08-29 16:00:40Z

0

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

answered Aug 29, 2016 at 16:00

Rafi Ud Daula Refat

2,25520 silver badges28 bronze badges

Comments

Natraj · Accepted Answer · 2016-08-30 09:22:01Z

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

Collectives™ on Stack Overflow

Very basic Javascript code not functioning

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related