Why does my function run three times? - javascript

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>


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/


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>


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>

Related

Javascript function doesnt give class

I have a small thing I have to make. I need to give a CSS class to a div and this has to change the insides of the div. But my button doesn't execute the onclick or something. I don't get errors in the console.
function Naampie(){
document.getElementById("ja").className += " pasta-di-mama";
}
Naampie();
.pasta-di-mama{
color: red;
font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Javascript Stuff</title>
</head>
<body>
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button onclick="Naampie()">Functie</button>
<!--<script src="script.js" type="text/javascript"></script>-->
</body>
</html>
Does anyone have an idea why this isn't working?

You're missing the . in your CSS declaration to target the class. I'd also recommend using classList.add instead of appending to the className.
function Naampie() {
document.getElementById("ja").classList.add("pasta-di-mama");
}
Naampie();
.pasta-di-mama {
color: red;
font-size: 2em;
}
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button onclick="Naampie()">Functie</button>

Try classList.add(). You also forgot to precede the class with dot (.) in CSS. I will also recommend not use inline event handler:
function Naampie(){
document.getElementById("ja").classList.add("pasta-di-mama");
}
document.getElementById('myBtn').addEventListener('click', Naampie);
.pasta-di-mama{
color: red;
font-size: 2em;
}
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button id="myBtn">Functie</button>

You can use classList.add("className")
function Naampie(){
document.getElementById("ja").classList.add("pasta-di-mama");
}
Naampie();
.pasta-di-mama{
color: red;
font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Javascript Shit</title>
</head>
<body>
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button onclick="Naampie()">Functie</button>
</body>
<script src="script.js" type="text/javascript"></script>
</html>

Try add Class
function Naampie(){
document.getElementById("ja").classList.add("pasta-di-mama");
}

Another way of doing it...add an event listener to the btn.
document.getElementById("myBtn").addEventListener("click", function() {
document.getElementById("ja").classList.add("pasta-di-mama");
});
.pasta-di-mama {
color: red;
font-size: 2em;
}
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button id="myBtn">Functie</button>

Including javascript to an html page

Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>

so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>

It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>

You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>

Minimize Maximize is not Working

The minimize & maximize Button is not working
The code is
I want to minimize & maximize this div & also how to set the height of div box.It is just as extra as height of title bar because i give height as 100%
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$(this).slideUp();
} else {
$(this).html("-");
$(this).slideDown();
}
$("#box").slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>

Try this code : I have commented two lines of your code $(this).slideUp(); and $(this).slideDown(); this lines show/hide on click of that link.
$(function () {
$("#main").resizable();
});
$("#button").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
//$(this).slideUp();
} else {
$(this).html("-");
//$(this).slideDown();
}
$("#box").slideToggle();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box" style="height:200px;border:1px red solid">
This is box
</div>
</div>
</body>

$(this).slideDown(); in the buttons function will simply slide the button, remove them and you're basically good to go!
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#box").slideToggle();
});
#button {
background: lightblue;
border: 1px solid #ccc;
}
#box {
background: coral;
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">+</div>
</div>
<div id="box">
Hello World!
</div>
</div>

$(function() {
$("#main").resizable();
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$(this).slideDown();
} else {
$(this).html("-");
$(this).slideDown();
}
$("#box").slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">Hi
</div>
</div>

You need to have some content inside the div box, so i added a fixed height ot demonstrate the function.
And you were sliding the button div which will hide it prevent you from click on it again.
See snippet bellow on how to do it:
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$("#main").css('height', 'auto');
$("#main").resizable('disable');
} else {
$(this).html("-");
$("#main").resizable('enable');
}
$("#box").slideToggle();
});
#box {
height: 100px;
}
#button {
cursor: pointer;
background: yellow;
padding: 0 5px;
}
#main {
border: 1px solid;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>

New to jquery, wondering why .hide() not working

I don't really know why this isn't working but I'm new to javascript so I'm sure I made a mistake.
I have a button and when clicked I want the div to disappear but when I click on the button nothing happens.
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button"/>Begin Tour</a>

You are missing jQuery library in your code snippet.Add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> to include jQuery library
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
});
//^....... missing ')'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button" />Begin Tour</a>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="file"]
{
display: block;
margin-top: -20px;
opacity: 0;
}
</style>
<script>
$(window).ready(function() {
$(document).delegate('#hide','click',function(){
$('#spanFileName').hide();
});
});
</script>
</head>
<body>
<p id='hide'> Click for hide</p>
<span id='spanFileName'>Hide me</span>
</body>
</html>

simple test in Jquery isn't working. green square doesn't show

Alright, so the green square is suppose to show when your mouse is on the red square, but it doesn't. Here is the code:
<html>
<head>
<script type="text/javascript"
src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("a").bind("mouseover",
function(){
$("b").css("display", "block");
});
$("a").bind("mouseout",
function(){
$("b").css("display", "none");
});
});
-->
</script>
</head>
<body>
<div class="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
<div class="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>
</body>
</html>

Put a dot before each selector to form a class selector:
$(".a").bind("mouseover",
function(){
...
Your code can be reduced to this:
$(document).ready(function() {
$(".a").hover(function() {
$(".b").toggle();
});
});
http://jsfiddle.net/karim79/EkA6p/1/

Should be $(".a"). the selector needs a period. Where if you had id="a" then you would use ("#a"), but just doing $("a") will actually select all links i.e. <a href="">
http://jsfiddle.net/hZL94/

you need to set the class .a .b
<script type="text/javascript">
$(document).ready(function() {
$(".a").bind("mouseover",
function(){
$(".b").css("display", "block");
});
$(".a").bind("mouseout",
function(){
$(".b").css("display", "none");
});
});
</script>

It's becasue you try to select the <a> and <b> elements, instead of the <div class="a"> and <div class="b"> elements. $('.a') instead of $('a'). See jsFiddle.
$(document).ready(function() {
$(".a").bind("mouseover", function() {
$(".b").css("display", "block");
});
$(".a").bind("mouseout", function() {
$(".b").css("display", "none");
});
});

try this
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#a").bind("mouseover",
function(){
$("#b").css("display", "block");
});
$("#a").bind("mouseout",
function(){
$("#b").css("display", "none");
});
});
</script>
</head>
<body>
<div id="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
<div id="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>
</body>
</html>

Categories