I want to make a button (out of divs) and a paragraph (or any text field) below the divs that counts the clicks.
$(document).ready(function() {
$('#butt').mousedown(function() {
$("#butt").hide();
});
$("#pushed").mouseup(function() {
$("#butt").show();
});
$("#butt").click(function() {
button_click();
});
});
var clicks = 0;
function button_click() {
clicks = parseInt(clicks) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Clicks:" + clicks;
}
<!-- <link type="text/css" rel="stylesheet" href="CSS.css"/> -->
<form name="ButtonForm">
<div id="container">
<div id="pushed"></div>
<div id="butt"></div>
</div>
<div id="showCount"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script src="Untitled-1.js" type="text/javascript"></script>-->
</form>
Your div elements are empty and there is no CSS to give them any explicit size, so they will never be visible for you to click on them.
Also, the mousedown event handler can and should be combined with the click handler for butt and the mouseup event handler should just be a click event as well.
Additionally, you only need to update the number of clicks, not the word "Clicks", so make a separate placeholder for the number with a span element and then you can hard-code the word "Clicks" into the div.
Lastly, to increment a number by one, you can just use the pre or post-increment operator (++).
$(document).ready(function() {
var clicks = 0;
var divData = $("#clickCount");
$("#pushed").on("click", function() {
$("#butt").show();
});
$("#butt").on("click", function() {
$("#butt").hide();
clicks++; // increment the counter by one
divData.html(clicks);
});
});
#pushed, #butt {height:50px; width:150px; background-color:green; margin:5px;}
<body>
<form name="ButtonForm">
<div id="container">
<div id="pushed"></div>
<div id="butt"></div>
</div>
<div id="showCount">Clicks <span id="clickCount"></span></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
</form>
</body>
First of all, you should simplify your code. Hiding and showing the button is not necessary to produce the result you are looking for.
Second, change the #butt element to an actual button so that you have something to see and click.
Third, make sure your script is loading after jquery is included.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<button id="butt">I'm a button</button>
<div id="showCount"></div>
<script>
$(document).ready(function() {
$("#butt").click(function() {
button_click();
});
var clicks = 0;
function button_click() {
clicks = parseInt(clicks) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Clicks:" + clicks;
}
});
</script>
Related
I got a problem with one of the sites with JavaScript, and I need to automate a click and then find out how many turns I got before I run out of them. As in, for example, let's say I have 8 turns. So what I would need is to automatically have JavaScript to trigger said div id, 8 times. (As in, I add like this)
Link:https://jsfiddle.net/yxsgp8tc/
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<label><input type="text"/>00-99</label>
<button>
trigger it
</button>
</form>
</body>
in plain javascript, you would target unique elements (using an id) by using document.getElementById('<element_id'). If you wanted to target a class, you would document.querySelector('.<class_name>') for the first instance of the class, or document.querySeletorAll('.<class_name>')
Also, your input tag was misspelled "imput", and is a singleton tag so you don't have to close it off.
Assuming you wanted a way to trigger a click event, here's a basic example:
<head>
<script>
const test = document.getElementById('test');
const trigger = document.getElementById('trigger')''
test.addEventListener('click', () => {
const num_test = document.getElementById('num_tests').value;
for (let i = 0; i < num_test; i++) {
trigger.click();
}
});
trigger.addEventListener('click', () => {
console.log('trigger clicked');
});
</script>
</head>
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<input type="text" id="num_tests" value="">
<button id="trigger">
trigger it
</button>
</form>
</body>
https://jsfiddle.net/qr1z3d6e/2/
first in the jsfiddle.net link there are some errors such as imput instead of input.
I haven't tested it, but if I understand correctly is it something like this? try it.
<body>
<input id="myinput" type="text">00-99</input>
<button id="clickme">
</body>
<script>
var button = document.getElementById("clickme"),
count = 99;
var myInput = document.getElementById("myinput")
button.onclick = function(count){
count -= 1;
myInput.innerHTML = "00 " + count;
};
</script>
I'm using a search function to highlight text (function 2) in different chapters. In parallel most of this text is stored in div called content to ease reading. You can toggle these div to read the text (function 1).
When text is found by function 2, it's no longer possible to toggle the text in this chapter. I suppose this is related to use of "this" in function 1 (If I delete this it works) or handlers (if I add live in front of click in function 1 it works but live is deprecated and remplacement "on" is not working).
// function 1 : toggle content when clicking the button
$(".chapter button").on('click',function(f) { //live deprecated to be replaced
f.preventDefault();
var id = $(this).attr('id');
console.log(id)
$('#' + id + '+*').toggle();
// toggle is not working when highlight function located in item in this specific chapter
});
// function 2 : highlight content
$('#monForm').submit(function(e) {
e.preventDefault();
console.log('submitted')
// clear form
var str = $('#valeurForm').val();
$('#valeurForm').val("");
console.log(str);
// highlight
var strCut = str.split(' ');
for (i = 0; i < strCut.length; i++) {
// grey chapter where the word is located
$("div[class='chapter']:contains(" + strCut[i] + ")").css("color", "#929aab");
// and highlight in red specific word
// but i want to highlight all occurences of the word in this chapter ? how can I define index d ?
$("div[class='chapter']:contains(" + strCut[i] + ")").each(function(d) {
$(this).html($(this).html().replace(strCut[i], '<font color="red">$&</font>'));
});
};
});
<head>
<meta charset="utf-8">
<style>
.content {
display: none;
}
</style>
</head>
<body>
<form name="search" id="monForm">
<input type="text" id="valeurForm">
</form>
<div class="chapter">
chapter 1
<button type="button" id="chapter1">Display content</button>
<div class="content">
content chapter1
</div>
</div>
<br>
<div class="chapter">
chapter 2
<button type="button" id="chapter2">Display content</button>
<div class="content">
content chapter2
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- jQuery est inclus ! -->
</body>
The problem was your $(this).html(). The .replace that you did removes the event listener of your button, because it modifies the DOM. Instead of getting the whole .html(), I did it with .children(), and then replaced just the text of it.
About replacing all the occurrences of the chapter word, you could use a Regular Expression. Using a string will replace just the first occurrence of the string. With the regular expression you can replace all of them.
// function 1 : toggle content when clicking the button
$(".chapter button").click(function(f) { //live deprecated to be replaced
f.preventDefault();
var id = $(this).attr('id');
$('#' + id + '+*').closest('.content').toggle();
// toggle is not working when highlight function located in item in this specific chapter
});
// function 2 : highlight content
$('#monForm').submit(function(e) {
e.preventDefault();
console.log('submitted')
// clear form
var str = $('#valeurForm').val();
$('#valeurForm').val("");
// highlight
var strCut = str.split(' ');
for (i = 0; i < strCut.length; i++) {
// grey chapter where the word is located
$("div[class='chapter']:contains(" + strCut[i] + ")").css("color", "#929aab");
// and highlight in red specific word
$("div[class='chapter']:contains(" + strCut[i] + ")").each(function(d) {
var regex = new RegExp(strCut[i],"g")
$(this).children().each(function (index,element) {
const text = $(element).html().replace(regex,'<font color="red">$&</font>')
$(element).html(text)
})
});
};
});
<head>
<meta charset="utf-8">
<style>
.content {
display: none;
}
</style>
</head>
<body>
<form name="search" id="monForm">
<input type="text" id="valeurForm">
</form>
<div class="chapter">
chapter 1
<button type="button" id="chapter1">Display content</button>
<div class="content">
content chapter1 and the second ocurrence of chapter also highlighted
</div>
</div>
<br>
<div class="chapter">
chapter 2
<button type="button" id="chapter2">Display content</button>
<div class="content">
content chapter2
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- jQuery est inclus ! -->
</body>
EDIT
I wasn't clear enough about the errors, sorry, and I've noticed the right solution.
The point is that, instead of modifying the parent element, I've changed the text of the childrens. When you change the whole html, you remove the listener of your buttons when you add it again to the html, and that's why isn't possible to toggle the divs.
I basically would like to disable the Rollout and rollover function after I clicked. I tried an if argument but I can't get it to work. Sorry I am a real beginner in this.
I already achieved to change a text with the click in mother div but still can't disable other functions.
<!DOCTYPE html>
<html>
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<script>
var Enabled = true;
function down()
{
document.getElementById("button").src = "images/click.png"; }
var Enabled = true;
function rollover()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/on.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
}
var Enabled = true;
function rollout()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/off.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
}
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
<script/>
<body>
<h1>My Web Page</h1>
<div class="test1">
<button type="button" onclick="myFunction()">Try it</button>
</div>
<div class="row">
<div class="col"><p id="demo">A Paragraph</p></div>
<div class="col"><img src="images/off.png" id="button"
onMouseOver="rollover ()" onMouseOut="rollout ()"
onMouseDown="down()"
onClick="myFunction()"
onClick="this.innerHTML=down()
onMouseUp="rollover ()";/></div>
<div class="col">col3</div>
</div>
</body>
</html>
Check this out solution, When clicked it calls down() which sets Enabledto false and chages the image, now when you rollover and rollout it checks if Enabled is true, if it isn't it wont change the image.
function down(ele)
{
ele.src = "//placekitten.com/50/30"; //Clicked
Enabled = false; }
I found the hoooooly grail:)
Its a little tricky solution but works:)
I change the div instead of disabling the functions of the button states.
So here it is:
function showDiv() {
document.getElementById('button2').style.display = "block";
document.getElementById("button").style.display = "none";
}
Button2 is now the clicked button state, button is the div where all the other states are in. This way it stays in the clicked state after clicking and I get rid of the other button states after clicking:)
I want to modify the below code so that selected_users remains unique after append. That is, let's append a user U to selected_users only if selected_users does not already contain a U.
The below code you can copy and paste and it will work. All dependencies are on cdns.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
div { width : 200px }
.selected { background-color:blue; }
</style>
<script>
$(document).ready(function() {
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
selected_users.remove();
});
$("p").click(function() {
if( $(this).hasClass("selected") ) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
</script>
</head>
<div id="users">
<p class="1">User 1</p>
<p class="2">User 2</p>
<p class="3">User 3</p>
<p class="4">User 4</p>
<p class="5">User 5</p>
</div>
<div>
<input type="button" value=">>" id="add"/>
<input type="button" value="<<" id="remove"/>
</div>
<div id="selected_users">
</div>
You could do something like this:
$("#add").on("click", function()
{
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
if(!selected_users.find(users).lenght())
{
selected_users.append(users.clone().removeClass("selected"));
}
});
Forms like this commonly remove the item from the source list when adding it to the target list.
This sort of behavior would prevent the need to do the check, as it would be impossible to add the duplicate to your selected_users list.
Your code would look something like this for selecting/deselecting a user:
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.remove();
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
var users = $("#users");
users.append(selected_users.clone());
selected_users.remove();
});
NOTE: I have not tested the above code.
If you wanted to maintain the order of users in each of your list, you could do a sort on either list when adding to it, or you could maintain the visibility property of each user rather than actually removing/adding them from either list.
Simple solution is to remove form the list on the left hand side.
If you don;t want to do that. Try this. The idea is to assign ids to be able to check.
$("#add").on("click", function() {
var users = $("#users > p.selected");
users.uniqueId();//assigns unique id if they don't have one
//you can do above step somewhere else also for performance reasons
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.each(function(user) {
var id = user.attr('id');
var exists = $("#selected_users > [selectedid="+id+"]);
if (! exists || exists.length <= 0 ) {
selected_users.append(
user.removeClass("selected").
removeAttr("id").
attr('selectedid',id));
}
});
});
I would like to show a div based on the Onclick event of an link.
First Click - Show div1
Second Click - Hide remaining div's and Show div2
Third Click - Hide remaining div's and show div3
Fourth Click - Hide remaining div's and show div1 => repeat the loop and goes on..
Code Follows:
<div class="toggle_button">
Toggle
</div>
<div id='div1' style="display:none;">
<!-- content -->
</div>
<div id='div2' style="display:none;">
<!-- content -->
</div>
<div id='div3' style="display:none;">
<!-- content -->
</div>
Jquery Code :
$(document).ready(function() {
$("#toggle_value").click(function(){
$("#div1").show("fast");
$("#div2").show("fast");
$("#div3").show("fast");
});
});
The above code shows all divs on first click itself but it should show div1 on first click as mentioned.
I'll try my shot.
EDIT:
After second though, to avoid global variable use it's better to do the following
$(document).ready(function() {
$("#toggle_value").click((function(){
var counter = 0;
return function()
{
$("#div" + counter).hide("fast");
counter = (counter % 3) + 1;
$("#div" + counter).show("fast");
}
})());
});
You should add a counter in the function.
$(document).ready(function() {
var count = 0;
$("#toggle_value").click(function(){
if (count == 0) {
$("#div1").show("fast");
$('#div2').hide();
count++;
}
else if (count == 1) {
$("#div2").show("fast");
...
count++;
}
else if (count == 2) {
$("#div3").show("fast");
....
count++;
}
else {
$('div').hide();
count=0;
}
});
});
How about this
Working Example here - add /edit to URL to edit the code
$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'
$(function() {
var counter = 1;
$('#toggle_value').click(function() {
$('div','#container')
// to stop current animations - clicking really fast could originally
// cause more than one div to show
.stop()
// hide all divs in the container
.hide()
// filter to only the div in question
.filter( function() { return this.id.match('div' + counter); })
// show the div
.show('fast');
// increment counter or reset to 1 if counter equals 3
counter == 3? counter = 1 : counter++;
// prevent default anchor click event
return false;
});
});
and HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
.display { width:300px; height:200px; border: 2px solid #000; }
.js .display { display:none; }
</style>
</head>
<body>
<div class="toggle_button">
Toggle
</div>
<br/>
<div id='container'>
<div id='div1' class='display' style="background-color: red;">
div1
</div>
<div id='div2' class='display' style="background-color: green;">
div2
</div>
<div id='div3' class='display' style="background-color: blue;">
div3
</div>
<div>
</body>
</html>
This could easily be wrapped up in a plugin
A simple way would be to introduce a variable that tracked clicks, so something like this:
var tracker = 0;
$(document).ready(function() {
$("#toggle_value").click(function(){
if(tracker == 0)
{
$("#div1").show("fast");
}else if(tracker ==1)
etc etc
tracker ++;
});
});
My solution is a little different - I'd do it dependant on the state of the divs at the current time (on click). See below for what I mean by this.
$(document).ready(function() {
$("#toggle_value").click(function(){
if ($("#div1).is(':visible')) { // Second click
// Hide all divs and show d2
$("#div1").hide();
$("#div2").show("fast");
$("#div3").hide();
$("#div4").hide();
} else if ($("#div2").is(':visible')) { // Third click
// follow above example for hiding all and showing div3
} else if ($("#div3").is(':visible')) { // Fouth click
// follow above example for hiding all and showing div1
} else { // first click
// All divs should be hidden first. Show div1 only.
$("#div1").show("fast");
}
});
});
Just to warn you - I have not tested this code :)
Based upon the following for determining visibility: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F
Hope it helps
I prefer to use "filter" method and make a little easier work with counter:
(function () {
var divCounter = 0, divs;
$(function () {
divs = $('#div1, #div2, #div3');
$('#toggle_value').click(function (e) {
divs.hide() // hide other divs
.filter(function (index) { return index == divCounter % 3; }) // select appropriate div
.show('fast'); // and show it
divCounter++;
});
});
})();
I would probably do something like: (The following assumes all your <div>s are in a container with id "container")
$(document).ready(function() {
var $allDivs = $("#container > div");
var counter = 0;
$("#container > div").click(function(){
counter = counter < $allDivs.length - 1 ? counter + 1 : 0;
$allDivs.not(":eq("+counter +")").hide("fast");
$allDivs.eq(counter).show("fast");
});
});
The .toggle function in jQuery takes any number of argument functions, so the problem is already solved. See the docs under Events.
$("#toggle_value").click(function()
{
$("#div" + (++c) % 3).show().siblings().hide();
}
var c = 1;
$("#toggle_value").click(function()
{
$("#div" + c).hide("fast");
$("#div" + ++c).show("fast");
if (c > 3) c=1;
});
First You have to add query basic file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Then you have to add the following code:
<script type="text/javascript">
$(document).ready(function () {
$("#hide").click(function(){
$(".slider_area").hide(1000);
$("#show").css("display","block");
$("#hide").css("display","none");
});
$("#show").click(function(){
$(".slider_area").show(1000);
$("#show").css("display","none");
$("#hide").css("display","block");
});
});
</script>
Add the code above into the header portion and the code below in the body portion.
<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />
The code is ready for the different image click for show and hide div.
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
if (temp1 == 0) {
$('#' + temp).hide();
temp = 'Hide_<%=id>';
$('#Hide_<%=id>').show();
temp1 = 1;
}
else{
$('#' + temp).hide();
temp = 'Hide_<%=id>';
$('#Hide_<%=id>').show();
temp1 = 0;
}
});
</script>