I want to show the success button if my value is less than 90, and show the warning button if the value is equal or greater than 90. The value is received in JS. The buttons are as follows:
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="Warning">Server 1</button>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Normal">Server 2</button>
How can I enable/show and disable/hide a button depending on the value I'm receiving?
Thanks in advance.
Check whether or not your value is less than 90 and modify the display property of the buttons accordingly.
if(value < 90) {
document.querySelector(".btn-warning").style.display = "none";
document.querySelector(".btn-success").style.display = null;
} else {
document.querySelector(".btn-warning").style.display = null;
document.querySelector(".btn-success").style.display = "none";
}
Instead of .querySelector(), you could also consider using IDs and .getElementByID(), or any other means of retrieving the elements. If you're using jQuery, this can be accomplished with the .css() method.
Related
I am creating a quiz application in angular.I am fetching data from api in which there are countries and their respective capitals.I have fetched them randomly and mapped them as questions and answers.Now i want to calculate the score.For this i am trying to get the value of selected button.I am doing this by document.getelementbyID("idx") ,but this returns me any random option not the option which i have selected.Can anybody help me with this
correct() {
var y= document.getElementById("idx")
console.log(y)
if(y==this.saveCap[this.userIndex]){
this.score=this.score+1;
console.log(true)
console.log(this.score)
// this.userIndex++;
}
}
checkoptions(){
this.correct();
this.userIndex++
// this.options.remove(this.x)
this.arrayDel();
this.arrayform();
this.shuffle();
}
HTML File
<h1>Quiz</h1>
<div *ngIf="saveCont && saveCap " class="quescard">
<form >
<h1>What is the capital of{{saveCont[userIndex]}}</h1><br>
<li *ngFor="let cap of options"><button type="button" class="btn btn-primary btn-block btn-lg" (click)="checkoptions()" id="idx" >{{cap}}</button></li>
<button (click)="res()">Submit</button>
</form>
</div>
beacuse the id is added to both buttons it's not get you the tight button clicked.
you need to pass the cap to the the click event like this:
<li *ngFor="let cap of options"><button type="button" class="btn btn-primary btn-block btn-lg" (click)="checkoptions(cap)" id="idx" >{{cap}}</button></li>
and then inside checkoptions function get it
checkoptions(cap: string){
// take the answer and check it and increase the score if it's correct
this.correct(cap);
this.userIndex++
// this.options.remove(this.x)
this.arrayDel();
this.arrayform();
this.shuffle();
}
I have four buttons:
<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>
And I want to capture the value of the button clicked so that I may add it later with another button and add them together.
I added this for the JS:
var inputYardSize = $("#button-yardSize").on("click", function(){
$("#button-yardSize").val();
console.log(inputYardSize);
});
I read that I may need to use .attr instead, however not sure how to add a custom attribute to the buttons?
First of all, you should use a class, not an ID. IDs should be unique, and $("#button-yardSize") will only select the first button.
In the event listener you can use this to refer to the button that was clicked.
You need to assign the inputYardSize variable inside the function. .on() just returns the jQuery object you're binding the handler to, not the value from inside the function.
$(".button-yardSize").on("click", function() {
var inputYardSize = $(this).val();
console.log(inputYardSize);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success button-yardSize" value="2"><h1>2</h1></button>
<button class="btn btn-success button-yardSize" value="4"><h1>4</h1></button>
<button class="btn btn-success button-yardSize" value="6"><h1>6</h1></button>
<button class="btn btn-success button-yardSize" value="8"><h1>8</h1></button>
EDIT: You should use ID for unique elements and class for repeating element.
So if you would replace the ID with class on the button, the code should look like this:
Remove the declaration from the beginning and instead use it to store the values inside the click function.
In this way, you will have the value of the clicked button with the specified class.
$('.button-yardSize').on('click', function(){
var inputYardSize = $(this).val();
console.log(inputYardSize);
})
The id of each element has to be unique
<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>
The JS function is incorrect, you need a click handler which will log the button value
$("#button-yardSize1").on("click", function(){
inputYardSize=$("#button-yardSize1").val();
console.log(inputYardSize);
});
I am attempting the check the value in a button using a javascript onload function on getting the value of the button I am performing a check and if the check is true let it disable a preview button using its id. This is the javascript snippet
window.onload = function() {
//var text = $(".badge").text();
var totalCheck = document.getElementById('totalcheck').value;
alert("before check");
if(totalCheck == "0.0"){
alert(totalCheck);
$('#disbtn').on('click',function() {
$(this).prop("disabled",true);
});
}
}
This is the button I am checking immediately the window loads
<button id="totalcheck" class="btn btn-default" type="button">
Total <span id="price" class="badge">0.00</span>
</button>
This is the button I am attempting to disable if the check is true
<button id="disbtn" class="one btn btn-primary" type="button">
<i class="fa fa-caret-down" aria-hidden="true"></i>
Preview </button>
the interesting thing is that the alert never pops up even before the check. Please what could be wrong
Reason for not working?
You are called the wrong element for matching with if condition . 0.00 is not a button value .its span text .so button
value is null so always return false in if
And if condition matching also wrong .The innerTEXT is 0.00 but you are matching 0.0 so it always false.
so try like this
var totalCheck = document.getElementById('price').innerHTML;
function start() {
//var text = $(".badge").text();
var totalCheck = document.getElementById('price').innerHTML;
alert("before check "+ totalCheck);
if (totalCheck.trim() == "0.00") {
alert(totalCheck);
$('#disbtn').on('click', function() {
$(this).prop("disabled", true);
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="start()">
<button id="totalcheck" class="btn btn-default" type="button">
Total <span id="price" class="badge">0.00</span>
</button>
<button id="disbtn" class="one btn btn-primary" type="button">
Preview </button>
</body>
You have to take 'price' instead of 'totalcheck' to get your totalcheck,
var totalCheck = document.getElementById('price').innerHTML;
The value Total is contained inside your span with ID "price".
Use innerHTML in place of value, since span does not support the property value.
var totalCheck = document.getElementById('price').innerHTML;
How to disable a button on click and replace that button with another button with different function using AngularJS?
The following is my button,
<button type="submit" class="btn btn-small btn-default"
ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">
<span class="glyphicon glyphicon-edit"></span> Edit Setting</button>
you can use a state setting, say $scope.showFirstButton=true to control when to show the submit button:
<button ng-show="showFirstButton" type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">Edit Setting</button>
and another button, showing them alternatively:
<button ng-show="!showFirstButton" type="submit" class="btn btn-small btn-default" ng-click="doSomethingElse()">Seccond Button</button>
In the controller method $scope.editSetting() you change the value of the state: $scope.showFirstButton = !$scope.showFirstButton'.
Edit: if you need to revert the state of the buttons, do the same thing in the second method:
$scope.doSomethingElse = function(){
//some cool things happen here, and:
$scope.showFirstButton = !$scope.showFirstButton
}
and this will get back the first button and hide the second.
The below code generates a json string on the click of some buttons.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
var output = $(".btn").click(function() {
$(this).toggleClass('active');
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
};
if (!output.Studios.length) {
output.Studios = $('#btnStudios button').map(function() {
return $(this).val();
}).get()
$('.list').html(JSON.stringify(output));
});
Basically what i am looking for is a timer which refreshes for 1 second everytime a button is clicked and then generates the json string based on the button selection.
I used the setInterval() function but that did not help.
How would i go about this?
Thanks in advance.
I didn't fully understand your question.
However, based on the code, I assume you want to show a JSON-string based on which buttons have the .active class?
Your code contained syntax errors.
I created a quick JSfiddle with what I think you wanted.
However, I have made no use of setTimeout since I couldn't come up with valid use case.
Feel free to provide us with more info and I'll improve my answer!
EDIT:
Okay, so you want to wait 1sec after the click.
I updated the JSfiddle.
EDIT²:
I'd also use clearTimeout so clicks that happened while you are already waiting 1 sec are ignored.
As seen in this JSfiddle.