javascript div onclick if else control - javascript

First of all, my English is very bad, sorry for that.
I don't know much javascript and I would like your help.
there is one div
<div id="click"></div>
when clicking on this div
if (...click){
var a = "click open";
}else{
var a = "";
}
I need a coding like this. When clicked, the variable a should be filled and empty when not clicked.
how do i do this please help
all i want is when it is clicked the variable a will be full when not clicked it will still work but it will be empty
if (...click){
var a = "click open";
}else{
var a = "";
}
all i want is when it is clicked the variable a will be full when not clicked it will still work but it will be empty

Considering the following html :
<div id="click"></div>
You can initialize the variable in javascript as an empty string and add an event listener to change the value when the div is clicked with the following js code:
let a = "";
const click = document.getElementById("click");
click.addEventListener('click', function(){
a = "click open";
})

I don't understand your question, because your button is empty here. So, if your button is empty, how do you click on the button and get the result? That is why I added two answers and hope it will help you.
//example one
const clickBtn = document.getElementById("click");
let click = true;
if (click) {
var a = "click open";
clickBtn.innerHTML = a;
} else {
var a = "";
clickBtn.innerHTML = a;
}
//exmaple two
const clickBtn2 = document.getElementById("click2");
let click2 = true;
clickBtn2.addEventListener("click", () => {
if (click2) {
var a = "yes, click open";
clickBtn2.innerHTML = a;
} else {
var a = "";
clickBtn2.innerHTML = a;
}
});
<div id="click"></div>
<div id="click2">Click me</div>

I added the text "Click" to give the element a clickable area.
let a = '';
document
.querySelector('#click')
.addEventListener('click', () => a = 'clicked');
<div id="click">Click</div>

This is what I wanted to do I didn't know how to do it?
let jmin = "";
const click = document.getElementById("price_range");
click.addEventListener('click', function(){
var jmin = "min=" + minimum_price;
})
history.pushState(null, '', 'index.php?' + kategori + filtb + filtr + filts + jmin);

Related

javascript: toggle plain text to hide it like password text on click of a button

I do not have a <input> or any form. I want some way to toggle a plain text to something like **** on click of a button.
for example I have
<p id='one'>google_yahoo</p>
<button id='two'>toggle</button>
so when I click the button once, <p> should become:
<p>************</p>
Then when I click the button then I should again get back google_yahoo
But by default I want it be in ***** form.
What I did:
<script>
function myfunction(){
$("#two").click(function(){
$("#one").text("abc");
});
};
</script>
Any straightforward, easy to understand solution anyone?
You need to create some variables to store value of your text. Try it on JSFiddle.
var txt = document.getElementById('one');
var btn = document.getElementById('two');
var visible = 1;
var value = '';
btn.addEventListener('click', function(){
if(visible){
value = txt.innerHTML;
txt.innerHTML = '*'.repeat(value.length);
}else{
txt.innerHTML = value;
}
visible = !visible;
});
var pMemory = null;
$('button').click(function() {
var pElement = $('p').get(0);
if (pMemory === null) {
// save to cache
pMemory = $(pElement).text();
}
if (pMemory === $(pElement).text()) {
$(pElement).text('*'.repeat(pMemory.length));
} else {
$(pElement).text(pMemory);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>google_yahoo</p>
<button>toggle</button>
Using text-security css property as an option.
$(document).ready(function(){
$("#two").on("click", function(){
$("#one").toggleClass("password_field");
})
})
.password_field{
-webkit-text-security:disc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id='one' class="password_field">google_yahoo</p>
<button id='two'>Toggle</button>

jQuery .click()/.on("click"...) I need help swapping text on alternate clicks

What I am trying to accomplish is something 'like'
$("button .toggleExcerpt)
.toggle( function FIRST() {
do first function...
} , function SECOND() {
do second function...
But since it's deprecated, I don't know what alternative to use. Ive tried using if/else inside of a .on("click", function()... but didn't seem to work.
jQuery:
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function (event) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
})
.on("click", function (event) {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
})
Both of the click events are logging to the console, so I know that the first event is running, and then is quickly replaced by the second event, but I would love to make these (or simply the text inside the span) to alternate....
I've already looked at this suggestion, but I am not sure how to implement it in my example, nor if this particular jQuery implementation is what I need.
To check the class is exists or not , you have to use .hasClass() . if class found,use .remove() to remove that element and .append() to add another.
For example, You can try this code :
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function (event) {
if($(this).find('span').hasClass('readmore') === true){
$(this).find('span.readmore').remove();
$(this).append(readLess);
}else{
$(this).find('span.readLess').remove();
$(this).append(readMore);
}
})
Check this snippet:
var readMore = "read about the solution...";
var readLess = "hide full description...";
var excerptState = true;
//".toggleExcerpt" is an empty <button> in the HTML
$(".toogleExcerpt").html(readMore);
$(".toogleExcerpt").click(function () {
$(this).html( excerptState ? readLess : readMore );
// invert state
excerptState = !excerptState
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toogleExcerpt"></button>
Why not try letting a boolean swap back and forth for you?
Here's your snippet:
$(document).ready(function() {
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
var more = true;
//".toggleExcerpt" is an empty <button> in the HTML
$("#toggleExcerpt").append(readMore);
$("#toggleExcerpt")
.on("click", function(event) {
if (more) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
more = false;
} else {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
more = true;
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="toggleExcerpt"></button>
I think I created a solution for you.
Just use a flag var that increments by 1, and check if it is odd or even and depending on if it is odd or even it will alternate the text for you onclick:
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
var flag = 0;
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function(event) {
if (flag % 2 == 0) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
} else {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
}
flag++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggleExcerpt" style="width:300px">

How to change class back after onclick

I'm creating a spoiler-tag script where the user clicks on spoiler text, the text will either blank out or change font-color depending on the class assigned to it. I'm rather a noob at Javascript.
My script only works when I click on the spoilered text when it is blank- so when I have already clicked on it, I can't reclick to change it back.
Here is the code that works:
// Hide Spoiler Individually
var singleHidden = document.getElementsByClassName("hidden");
var hideMe = function () {
var attribute = this.getAttribute("hidden");
this.className = "show";
};
for (var i = 0; i < singleHidden.length; i++) {
singleHidden[i].addEventListener("click", hideMe, false)
};
Here's a link on jsfiddle.
https://jsfiddle.net/o94c00hb/
Try this:
var hideMe = function() {
if(this.className == "hidden")
this.className = "show"
else
this.className = "hidden"
};
If you're not opposed to using jquery i would do something like this:
$('.hidden').on('click', function(){
$(this).toggleClass('show');
});
JSFIDDLE

JavaScript Button Style change on click

I have put together this piece of JavaScript, but I am struggling with the code as I'm a newbie. What I want to do is when a button is clicked it will change the background color opacity. The code below does this, but now I want the button to be reverted to the normal state when I click it again.
How can I do this? Thanks..
Normal state: background="rgba(255,0,0,0.8)"; Pressed state:
background="rgba(255,0,0,0.6)";
function highlight(id) {
document.getElementById(id).style.background="rgba(255,0,0,0.6)";
}
I would use a CSS class:
.opacityClicked{
background:rgba(255,0,0,0.8);
}
.opacityDefault{
background:rgba(255,0,0,0.6);
}
And change your function to:
function highlight(id) {
var element = document.getElementById(id);
element.class = (element.class == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
Or if you want to use only JavaScript
var isClicked = false;
function highlight(id) {
isClicked = !isClicked;
var element = document.getElementById(id);
element.style.background = (isClicked == true) ? "rgba(255,0,0,0.6)" : "rgba(255,0,0,0.8)";
}
Update(See comments: if you use 2 buttons):
var buttonClicked = null;
function highlight(id) {
if(buttonClicked != null)
{
buttonClicked.style.background = "rgba(255,0,0,0.8)";
}
buttonClicked = document.getElementById(id);
buttonClicked.style.background = "rgba(255,0,0,0.6)";
}
You could do something really quick like this:
First, add a hidden input element to your page like so:
<input type="button" id="foobar" value="FooBar!" onclick="highlight('foobar')" style="background-color:rgba(255,0,0,0.8);" />
<input type="hidden" id="one_neg_one" value="1" /> <= hidden element
Next, put this in your highlight function:
function highlight(id) {
var a = 7;
var o = document.getElementById("one_neg_one");
var newa = (a + (parseInt(o.value) * -1)) * 0.1;
document.getElementById(id).style.background="rgba(255,0,0," + newa + ")";
o.value = o.value * -1;
}
That should work, although I agree with a previous answer that you should use a css class for this.
#Ruben-J answer works fine. There is a syntax error though - you should instead use element.className rather than element.class.
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
Below is an updated answer using the correct syntax:
function highlight(id) {
var element = document.getElementById(id);
element.className = (element.className == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
Also noticed that this answer doesn't show the HTML. Make sure to pass through the id element, not the name of the id.

How to show multiple text fields on button click one by one

I need to add 2-3 text fields on button click one by one, where 'L' is the ID of the textfield. I am trying this code, but instead of using jQuery I want to use simple javascript because I am implementing this code in a Joomla environment.
function WrapperScript () {
JQuery('#wrapper1 button').click(function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var setting = JQuery(id).css('display');
if (setting=='none')
{
JQuery(id).css('display', 'block');
break;
}
}
});
}
if you need to make the same script without using jQuery here is a sample
function WrapperScript () {
//use an appropriate getter for the button
var button = document.getElementblahblah
button.onclick = function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var element = document.getElementById(id);
var setting = element.style.display;
if ( setting=='none' )
{
element.style.display = 'block';
break;
}
}
}
}

Categories