Is there any way to find the number of DIV's displayed in the browser with class=.class?
Something like this:
$('.class').Numberofobjects();
*Obviously Numberofobjects is made up.
Thanks!
Taylor
You want the length property (and make sure to constrain the tag type):
$('div.class').length
.length will give you the list of classes that match
$('.class').length
api here
http://api.jquery.com/length/
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert($("div.a").length);
});
</script>
</head>
<body>
<input type="button" id="mybutton" value="Click" />
<div class="a">
</div>
<div class="a">
<div class="a">
</div>
</div>
<div class="a">
</div>
</body>
Related
var app=angular.module('ang',[]);
app.controller('ctr',function($scope){
$scope.run=function(){alert("run")}
$scope.break=function(){alert("break")}
})
.test{width:160px;height:30px;background-color:green;color:white}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="ang" ng-controller='ctr'>
<button class="test" ng-click="a?'run()':'break()'">click=calling...{{a?'run()':'break()'}}</button>
<button ng-click="a=!a">click me</button>{{a}}
</div>
</body>
</html>
Here i want to dynamically change the value of ng-click based on a value using conditional statement,but it is not working as expected.Please help me out
Thanks in advance
Change this line shown as below
Because it is already interpolated. You need not to mention ' ' again to call the scope function
<button class="test" ng-click="a?run():break()">click=calling...{{a?'run()':'break()'}}</button>
remove the single quote in the function
change this
{{a?'run()':'break()'}}
to this
{{a?run():break()}}
var app=angular.module('ang',[]);
app.controller('ctr',function($scope){
$scope.run=function(){alert("run")}
$scope.break=function(){alert("break")}
})
.test{width:160px;height:30px;background-color:green;color:white}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="ang" ng-controller='ctr'>
<div class="test" ng-click="a?'run()':'break()'">click=calling....{{a?run():break()}}</div>
<button ng-click="a=!a">click me</button>{{a}}
</div>
</body>
</html>
I'm new to Javascript and can't figure out why no script is working in either Firefox or IE. I'm working with Notepad++ and after my external .js file didn't work I made a simple script that isn't working either:
This is the end of my html.
<div id="form1">
<form>
<textarea name="boxtext" id="textarea1" rows="10" colums="30">
maximum 300 characters
</textarea>
<button type="button" id="submit1" onclick="myFunction()">submit this</button>
</form>
</div>
<div id="forTheBoxes"></div>
<div id="footer">Copyright Jesper Hodge</div>
<script>myFunction() {window.alert("ok!")}</script>
</body>
</html>
Make this changes:
function myFunction() {
window.alert("ok!");
}
Or
var myFunction=function () {
window.alert("ok!");
}
2 things I see. The word function is missing where you declare your function.
<script>function myFunction() {window.alert("ok!")}</script>
And your script it in a bad place. Try putting it in <head> area.
This should be work:
1) Declare function myFunction
2) Insert your external js file in your html header
3) Handle event onclick button in html
function myFunction() {
alert("ok!");
}
<html>
<head>
<script type="javascript/text" src="/yourJsSourceFile"></script>
</head>
<body>
<div id="form1">
<form>
<textarea name="boxtext" id="textarea1" rows="10" colums="30">
maximum 300 characters
</textarea>
<button type="button" id="submit1" onclick="myFunction()">submit this</button>
</form>
</div>
<div id="forTheBoxes"></div>
<div id="footer">Copyright Jesper Hodge</div>
</body>
</html>
Here is the HTML:
<html>
<head>
<Script type = "text/javascript" src = "CprMdlrSrch.js"></Script>
<link type="text/css"rel="stylesheet"href="CprMdlrSrch.css"/>
</head>
<body>
<div id="main_box">
<p id="instructions"><strong>Please enter a part number to search.</strong></p>
<input id="part_num_search" type="text" name="searchPhrase">
<button id="search_button" type="button" value="button"> <strong>Search</strong></button>
<div id="results"></div>
<script type="text/javascript">
</div>
</body>
</html>
Here is the Javascript:
$(document).ready(function(){
$("#search_button").toggle(function() {
$("#part_num_search").fadeIn("slow");
},
$("#part_num_search").fadeOut("slow");
});
});
I am just unsure what I am doing wrong. I am really just trying to out the button to make sure I am on the right track.
thanks!
-Dustin
I'm not sure you understand how to use the toggle command. Please check out the API documentation: http://api.jquery.com/toggle/
For fade toggling, try .fadeToggle(), which started becoming available since JQuery 1.4.4.
http://api.jquery.com/fadeToggle/
Try something like this:
$(document).ready(function(){
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
});
You'll be better served using http://api.jquery.com/fadetoggle/.
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
I'm struggling to see what is wrong with my code. I've coded a local storage app to show user inputs, however, what is being input, is not displaying on the screen.
I'll show my code and hopefully someone can see an error somewhere, I think it should be working fine?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Premier League Site</title>
<link rel="stylesheet" href="style.css"/>
<script src="elliot.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header">
<h1>Premier League Site</h1>
</header>
<nav id ="Menu_Bar">
<ul>
<li>Home</li>
<li>Teams</li>
<li>Extras</li>
</ul>
</nav>
<section id="sectionone">
<form>
<p>(key) One: <input type="text" id="one"></p>
<p>(value) Two <textarea id="two"></textarea></p>
<p><input type="button" id="button" value="Save"></p>
</form>
</section>
<section id="sectiontwo">
Stored Info should go here
</section>
<footer id="footer">
Elliot Harrison 2014
</footer>
</div>
</body>
</html>
That is my HTML code, here is my Javascript code.
function doFirst(){
var button = document.getElementbyId("button");
button.addEventListener("click", saveStuff, false);
}
function saveStuff(){
var one = document.getElementbyId("one").value;
var two = document.getElementbyId("two").value;
sessionStorage.setItem(one,two);
display(one);
}
function display(one){
var sectiontwo = document.getElementbyId("sectiontwo");
var two = sessionStorage.getItem(one);
sectiontwo.innerHTML = "Name of variable: "+one+"<br />Value: "+two;
}
window.addEventListener("load", doFirst, false);
Can anyone notice anything wrong?
Thanks!
EDIT: Noticed one problem, I did not have ">" at the end of
Javascript is case sensitive, you have to use getElementById instead of getElementbyId.
there is also antoher error in your html:
<p>(key) One: <input type="text" id="one" /></p>
i have 2 div with relative position
user with a button fill first Div(innerHTML)
i want second Div move down when first Div Filled
show below link
Demo
Like this? jsFiddle
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
<div id='Content' style='position:relative;background-color:Green'>
</div>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
<div>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</body>
</html>
You had the nesting wrong in the <div>s.
It was really hard to understand your question, next time please write full sentences.
But I think I understood what you want to achieve.You can't just keep open divs, you have to close them. after the div just write </div>.If you open a div inside a div at least have some styling or other content, beside the inner-div, inside the parent-div.Fix those and it will work for you.
Here is the fixed code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
</div>
<div id='Content' style='position:relative;background-color:Green'>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
</div>
</body>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</html>