Hi there I am trying to combine 2 javascript onClick function so that they only fire once both have been clicked, this is what I have currently attempted.
Javascript
click.onclick = function() {
for (let i = 0; i < 1; i++) {
console.log("Clicks counted " + I);
}
}
click2.onclick = function() {
for (let i = 0; i < 1; i++) {
console.log("Clicks counted " + I);
}
}
if (click.onclick && click2.onclick === true) {
console.log("You have clicked on both onClicks");
}
HTML
<section>
<button id="button-click">Nice</button>
<button id="button-click-2">Even nicer</button>
</section>
Super simple I know, but I just wanted to figure out how to do this as it's for an API call so requires both buttons to be clicked and then send a statement.
You could use a function which checks a value. This value is made up by using bitwise or with 1 or 2, for more buttons double the value for each one.
In the checking function, check the value which is 2n - 1, for two check against 3.
let clickButtons = 0;
function check() {
if (clickButtons === 3) console.log("You have clicked on both onClicks");
}
document.getElementById("button-click").addEventListener('click', function() {
clickButtons |= 1;
check();
});
document.getElementById("button-click-2").addEventListener('click', function() {
clickButtons |= 2;
check();
});
<section>
<button id="button-click">Nice</button>
<button id="button-click-2">Even nicer</button>
</section>
Related
I am taking some tags name like "study","reading" something like that in the textfield with the help of Bootstrap 4 Tag Input Plugin With jQuery - Tagsinput.js and I have also some predefine tags name contain by buttons. If I click the button then the count of the tag's will increase (count++) and again click this button count will decrease(count--). Same rules for the text-field tags and the total count of the tags in both fields (text and buttons)<=5.
I can count the total tags of the both field but can't stop taking input in text-field when it is greater than 5.
html
<button class="btnr btnr-tags-optional" id="1" onclick="tagSelect(this.id)" >1</button>
<button class="btnr btnr-tags-optional" id="2" onclick="tagSelect(this.id)" >2</button>
<button class="btnr btnr-tags-optional" id="3" onclick="tagSelect(this.id)" >3</button>
My Js
var tagsCount = 0;
var store = 0;
var total_tags = 0;
function tagSelect(clicked_id) {
if (total_tags < 5) {
var tags = document.getElementById(clicked_id);
if (tags.style.borderColor == "rgb(255, 72, 20)") {
tags.style.borderColor = "";
tagsCount--;
} else if (tags.style.borderColor == "") {
tags.style.borderColor = 'rgb(255, 72, 20)';
tagsCount++;
}
total_tags = store + tagsCount;
}
console.log(total_tags);
}
$('#tags_text').on('change', function() {
if (total_tags >= 5) {
$("#tags_text").attr('readonly');
console.log('condition')
} else {
$("#tags_text").removeAttr('readonly');
var items = $("#tags_text").tagsinput('items').length;
store = items;
total_tags = store + tagsCount;
console.log(total_tags);
}
});
Here is the example in jsfiddle
This problem is solved.
I have changed the maxTags value of the plugin with the change of the tags click.
window.tagsCount = 0;
var store = 0;
var total_tags = 0;
function tagSelect(clicked_id) {
var r = ("#" + clicked_id).toString();
if (total_tags < 5) {
if ($(r).hasClass("classActiveIssue")) {
$(r).removeClass("classActiveIssue");
window.tagsCount--;
} else {
$(r).addClass("classActiveIssue");
window.tagsCount++;
}
} else {
if ($(r).hasClass("classActiveIssue")) {
$(r).removeClass("classActiveIssue");
window.tagsCount--;
}
}
total_tags = store + tagsCount;
$("#optionsleft").text(total_tags + "/5 selected");
//console.log("total",total_tags);
}
$('#tags_text').on('change', function() {
var items = $("#tags_text").tagsinput('items').length;
store = items;
total_tags = store + tagsCount;
});
and add the line in add:
self.options.maxTags = 5 - window.tagsCount;
Here is the fiddle
I have been trying to create onlick function in multiple divs by using shot codes in javascript but I end up creating multiple javascript codes with different ids and onclick function.
I tried for loop function but it didn't work as well.
function copy() {
document.getElementById("label").innerHTML = document.getElementById("mySelect").value;
}
function copy2() {
document.getElementById("label2").innerHTML = document.getElementById("mySelect2").value;
}
function copy3() {
document.getElementById("label3").innerHTML = document.getElementById("mySelect3").value;
}
function copy4() {
document.getElementById("label4").innerHTML = document.getElementById("mySelect4").value;
}
function copy5() {
document.getElementById("label5").innerHTML = document.getElementById("mySelect5").value;
}
function copy6() {
document.getElementById("label6").innerHTML = document.getElementById("mySelect6").value;
}
function copy7() {
document.getElementById("label7").innerHTML = document.getElementById("mySelect7").value;
}
function copy8() {
document.getElementById("label8").innerHTML = document.getElementById("mySelect8").value;
}
function copy9() {
document.getElementById("label9").innerHTML = document.getElementById("mySelect9").value;
}
function copy10() {
document.getElementById("label10").innerHTML = document.getElementById("mySelect10").value;
}
try this concept and adjust your code.
for(var i = 1; i < 3; i++) {
document.getElementById("label"+i).innerHTML = document.getElementById("mySelect"+i).innerHTML;
}
<div id="mySelect1">Up above the world so high</div>
<div id="mySelect2">like a diamond in the sky</div>
<div id="label1"></div>
<div id="label2"></div>
It is really hard to understand this question but can you not just make one function with a parameter? And loop the function with a for-loop if necessary.
function copy(id) {
id = id || ""; //empty string if id is undefined
document.getElementById("label" + id).innerHTML = document.getElementById("mySelect" + id).value;
}
function copyClick() {
for(var i = 0; i < 10; i++){
copy(i);
}
}
<button onclick="copyClick">Copy!</button>
Or if you have multiple buttons the copyClick function is not necessary.
<button onclick="function(){ copy(0) }">Copy 0!</button>
<button onclick="function(){ copy(1) }">Copy 1!</button>
...
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I've created a FizzBuzz Program and now I just want to display that in a div when a button is clicked.
I've created a function which will show the div when the button is clicked. (fizzbuzzButton)
All I want it to do is display the result of the FizzBuzz Function in the Div.
Is there not a simple way to display the result of a function in a div?
Or despite that, show the result of a function after clicking a button?
I can get it to display when clicking a button using:
<button onclick="FizzBuzz()">Show FizzBuzz</button>
But when using document.write, this removes the rest of the HTML.
<!DocType html>
<html>
<body>
<script type= text/javascript>
var max = 100;
var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";
function FizzBuzz() {
for(var x = (1); x <= max; x++) {
if(x % 5 == 0 && x % 3 == 0){
document.write(fizzbuzz, "</br>" )
}
else if(x % 3 == 0) {
document.write(fizz, "</br>")
}
else if(x % 5 == 0) {
document.write(buzz, "</br>")
}
else {
document.write(x, "</br>")
}
}
}
function fizzbuzzButton() {
document.getElementById('resultDIV').innerHTML = FizzBuzz;
}
</script>
<h1>FIZZ BUZZ!</h1>
<button onclick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">
</div>
</body>
</html>
Two significant problems:
Avoid document.write in general; it's only useful during initial page render (which in modern workflows is basically never). Instead have your function concatenate its output into a string, and return that string; put content into the DOM using e.g. innerHTML instead of document.write.
document.getElementById('resultDIV').innerHTML = FizzBuzz will fill the div with the function itself. You want to call the function and get its output, so use FizzBuzz() instead.
var max = 100;
var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";
function FizzBuzz() {
var output = "";
for (var x = (1); x <= max; x++) {
if (x % 5 == 0 && x % 3 == 0) {
output += fizzbuzz + "<br>"
} else if (x % 3 == 0) {
output += fizz + "<br>"
} else if (x % 5 == 0) {
output += buzz + "<br>"
} else {
output += x + "<br>"
}
}
return output;
}
function fizzbuzzButton() {
document.getElementById('resultDIV').innerHTML = FizzBuzz();
}
<h1>FIZZ BUZZ!</h1>
<button onclick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">
</div>
(A less significant issue also changed above: </br> is harmless but incorrect, use <br> instead.)
i found issue in your code and fixed for you, created one jsfiddle, have a look
This will help you
https://jsfiddle.net/wnx50hfr/
<!DocType html>
<html>
<body>
<script type= text/javascript>
var max = 100;
var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";
function FizzBuzz() {
for(var x = (1); x <= max; x++) {
if(x % 5 == 0 && x % 3 == 0){
document.write(fizzbuzz, "</br>" )
}
else if(x % 3 == 0) {
document.write(fizz, "</br>")
}
else if(x % 5 == 0) {
document.write(buzz, "</br>")
}
else {
document.write(x, "</br>")
}
}
}
function fizzbuzzButton() {
document.getElementById('resultDIV').innerHTML = FizzBuzz;
}
</script>
<h1>FIZZ BUZZ!</h1>
<button onClick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">
</div>
</body>
</html>
Only function fuzzbuzzButton is declared, and there is no fizzbuzzButton function.
If you want to run the function, you should use FizzBuzz() and not FizzBuzz.
Replace the function with
function fizzbuzzButton() {
document.getElementById('resultDIV').innerHTML = FizzBuzz;
}
If you want to write to the div with id 'resultDIV' through your approach, you should rather get the result as a string, and assign it to document.getElementById('resultDIV').innerHTML.
After I excecute my JS function over onClick button method. My site refreshes and everything that was writen with innerHTML is erased. I think i'm missing something. I will just put the whole JS function here. I probably don't understand something and that's what is causing it.
function stisk() {
var stevilo = prompt("Vnesi iskano stevilo");
var seznam = document.getElementById("vnos").value;
var pattern = new RegExp("^[0-9](,\s*[0-9])+$");
var vsota = 0;
var seznam = seznam.split(',');
var dolzina = seznam.length;
var pravilnost = pattern.test(seznam);
if (pravilnost == true) {
for (i = 0; i < dolzina; i++) {
vsota = vsota + parseInt(seznam[i]);
}
for (i = 0; i < dolzina - 1; i++) {
var star = document.getElementById("stevila").innerHTML;
if (isNaN(seznam[i]) == false) {
var starejsi = document.getElementById("stevila").innerHTML = star + parseInt(seznam[i]) + "+";
} else {
document.getElementById("stevila").innerHTML = "Vnos ni pravilen";
}
}
document.getElementById("stevila").innerHTML = starejsi + seznam[dolzina - 1] + "=" + vsota;
var c = 0;
for (i = 0; i < seznam.length; i++) {
if (stevilo == seznam[i]) {
c++;
}
}
if (c == 0) {
alert("stevila ni na seznamu");
} else {
alert("Stevilo je na seznamu");
}
} else {
document.getElementById("stevila").innerHTML = "Napacen vnos stevil";
}
}
HTML:
Here is the browser view:
After i press "V redu" (OK) Everything goes back to the start, expacting me to write a number inside. I want the 2+3+4=9 to stay there if that is possible? Thanks
Change:
<button onclick="stisk()">OK</button>
to:
<input type="button" onclick="stisk()">OK</input>
Like #Teemu said, < button > will submit a form element.
Another solution
<button onclick="stisk(event)">OK</button>
and in javascript
function stisk(e){
e.preventDefault();
...
This can be useful in other cases, like default behavior of <a href element is to redirect page, so you can prevent default behavior with event.preventDefault()
even better solution - let your button submit form, but prevent default on form submit
<form onsubmit="stisk(e)">
...
<button type="submit">
and in javascript
function stisk(e){
e.preventDefault();
...
and it will work when submitting form with Enter in input field.
I am trying to check the user input for greater than 2 and less than 4 checkbox selected.
I have to do this check before the form gets submitted.
Although I am using AlloyUI for client side validation. You can help me with vanilla javascript.
Please help me with my code...
<% for(loop here which generates more than one checkbox) { %>
<form name=".." method=".." action=".." onSubmit="return checkBox();">
<input type="checkbox" id=".." name=".."/>
</form>
%>
My javascript
function checkBox(){
alert("start");
var total = 0;
var max = form.checkcompare.length;
alert(max);
for(var idx = 0; idx < max; idx++)
{
if(eval("document.compareform.checkcompare[" + idx + "].checked") == true)
{
alert("checking");
total += 1;
}
}
if (total==2 || total==4)
{
/* document.compareform.submit(); */
alert("success");
}
else
{
alert('Select minimum of 2 or maximum of 4 Estimates');
}
//alert("You selected " + total + " boxes.");
}
Its not working..can someone help..Thanks
Something tells me you have little idea what you're doing.
First off, you're creating one form for EVERY checkbox. Open the form tag, then put in your loop to add the checkboxes, then close the form.
Now for your script...
form is undefined, so you can get its elements. form.checkcompare is undefined, so you can't get its length. You probably want to pass this in the onSubmit event (onSubmit="return checkBox(this);"), and function checkBox(form). Then use form.querySelectorAll('input[type=checkbox]');.
Next, why in the world are you using evil eval just to get an array index?
As if that weren't enough you say you want "between 2 and 4" but your code considers "3" invalid.
Finally, you're not returning anything.
Fixed (and improved) code:
function checkBox(form){
var total = 0;
var boxes = form.querySelectorAll('input[type=checkbox]:checked').length;
if (boxes < 2 || boxes > 4)
return true;
else {
alert('Select minimum of 2 or maximum of 4 Estimates');
return false;
}
}
function getNumberOfCheckedCheckboxes ( form ) {
var returnValue = 0;
var inputElements = form.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i ++) {
if (inputElements.type == "checkbox") {
if (inputElments.checked) {
returnValue ++;
}
}
}
return returnValue;
}