CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3093444
user3093444

Reputation: 11

Why does my function run three times?

I am trying to build a tag cloud: When I click on a tag, the required functons runs three times, as in 3,2,1, or 2,1 instead of only one time. This happens both on the jquery version and on plain js. What do I'm missing? This is a very simple code, and I'm stuck on it:

.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 25px; }
.cloud .weight-3 { font-size: 35px; }
    <!DOCTYPE html> 
    <html>  
    	<head>
    		<title>Exercise</title>
    		<link rel="stylesheet" type="text/css" href="2.css">
           <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
           </script>
    	</head>
    	<body>
    
       <div class="cloud">
       	<div id="firstword" class="weight-1" onclick="func1()">Cloud1</a>
       	<div id="secondword" class="weight-2" onclick="func2()">Cloud2</a>
        <div id="thirdword" class="weight-3" onclick="func3()">Cloud3</a>
    </div>
    
    <div>
    	<foo class="bar">
    		<foo id="ba"></foo>
    	</foo>
    </div>
    
    <script type="text/javascript">
    $(function()
    {
       $("#firstword").click(function()
       {
        alert("first.");
       });;
    
       $("#secondword").click(function(){
        alert("second.");
       });;
    
       $("#thirdword").click(function(){
        alert("third.");
       });;
    });	

    /*function func3(){
    	alert("3");
    };
    function func1(){
    	alert("1");
    }
    ;
    function func2(){
    	alert("2");
    };*/
    
    </script>
   </body>
  </html>

Upvotes: 1

Views: 318

Answers (3)

Andy Holmes
Andy Holmes

Reputation: 8077

You're getting this error because you haven't closed your divs properly.

You need to do this:

<div class="cloud">
    <div id="firstword" class="weight-1" onclick="func1()">Cloud1</div>
    <div id="secondword" class="weight-2" onclick="func2()">Cloud2</div>
    <div id="thirdword" class="weight-3" onclick="func3()">Cloud3</div>
</div>

Here's a jsFiddle to show this is all you need to change - https://jsfiddle.net/eyd5b0ku/

Upvotes: 1

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

Should work fine now

$(function() {

  $("#firstword").click(function(e) {
    alert("first.");
  });;

  $("#secondword").click(function(e) {
    e.stopPropagation();
    alert("second.");
  });;

  $("#thirdword").click(function(e) {
    e.stopPropagation();
    alert("third.");
  });;
});
.cloud .weight-1 {
  font-size: 10px;
}

.cloud .weight-2 {
  font-size: 25px;
}

.cloud .weight-3 {
  font-size: 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cloud">
  <div id="firstword" class="weight-1">Cloud1</a>
    <div id="secondword" class="weight-2">Cloud2</a>
      <div id="thirdword" class="weight-3">Cloud3</a>
      </div>

      <div>

        <foo class="bar">
          <foo id="ba"></foo>
        </foo>
      </div>

Upvotes: 0

Vignesh Raja
Vignesh Raja

Reputation: 8751

The HTML close tag is not correct. Changing it will work.

.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 25px; }
.cloud .weight-3 { font-size: 35px; }
<!DOCTYPE html>
    
    <html>
    
    	<head>
    		<title>Exercise</title>
    		<link rel="stylesheet" type="text/css" href="2.css">
    
    		 <script type="text/javascript" src="jquery.js"></script>
    	</head>
    	<body>
    
       <div class="cloud">
       	<div id="firstword" class="weight-1" onclick="func1()">Cloud1</div>
       	<div id="secondword" class="weight-2" onclick="func2()">Cloud2</div>
       		   	<div id="thirdword" class="weight-3" onclick="func3()">Cloud3</div>
    </div>
    
    <div>
    	
    	<foo class="bar">
    		<foo id="ba"></foo>
    	</foo>
    </div>
    
    <script type="text/javascript">
    $(function(){
     
    $("#firstword").click(function(){
        alert("first.");
    });;
    
    $("#secondword").click(function(){
        alert("second.");
    });;
    
    $("#thirdword").click(function(){
        alert("third.");
    });;
    });	
    function func3(){
    	alert("3");
    };
    function func1(){
    	alert("1");
    }
    ;
    function func2(){
    	alert("2");
    };
    
    </script>
    	</body>
    </html>

Upvotes: 0

Related Questions