Cannot Disable Button from being pressed - javascript

I'm creating front end code that plays a game of Black Jack. When the user hits the hit me button, the user draws a card. I'm trying to make it though that if the user draws a card that puts them over a value of 21, then the hit me button is disabled. Yet for whatever reason the button is not being disabled.
Javascript:
if (sum > 21) {
acePresent = checkAces(array); //checks the array of cards for any aces, If so change value of ace from 11 to 1.
if (acePresent) {
sum = sum - 10;
} else {
console.log("No aces and player has busted. Disabling hit me button");
document.getElementById("drawcards").disabled = true;
}
PUG file:
#endturn.ui.red.button
| Stay
#drawcards.ui.green.button
| Hit Me

If you want to disable a button with JS, you can use
document.getElementById("drawcards").setAttribute('disabled', true);
Docs
The other parts of logic depends on you, but some suggestions:
Does your checkAces return with a boolean?
Does checkAces return with the correct value?
Does checkAces synchronous?
Try debugging, why does the function not reach the else statement.

I figured out the issue. The issue was that I needed to add the class "disabled" to the button. The correct Javascript code to do so is this:
document.getElementById("drawcards").classList.add("disabled");

Related

Change button behaviour on (same) button click - jquery

I'm really sorry if this was already asked, but my searching skills just didn't find something similar.
So I have a form with multiple subsections.
I need to hide/show subsections and 'simulate' the page as if it had 3 different parts.
There is no access to the source code, so everything has to be done through css/js applied over existing code.
Keep in mind that there is already a button (I'll call it continueBtn here) that submits the form when pressed and I added a back button. Assume that all the variables (allSections, sectionOne etc. exist, they are not the problem).
I created a function that shows/hides/changes text based on what step of the form we are in; example code:
function showHideOnStep(step){
allSections.hide();
continueBtn.unbind('click');
backBtn.unbind('click');
switch (step){
case 1:
sectionOne.show();
continueBtn.attr('type','button');//make continue button to not submit
continueBtn.text("Go to step 2");
backBtn.click(function(){
//go to previous browser page, literally
})
continueBtn.click(function(){
showHideOnStep(2);
})
break;
case 2:
sectionTwo.show();
continueBtn.text("Go to step 3");
continueBtn.attr('type','button');//make continue button to not submit (in case it's a back from step 3)
continueBtn.click(function(){
showHideOnStep(1);
})
backBtn.click(function(){
showHideOnStep(3);
})
break;
case 3:
sectionThree.show();
continueBtn.text("Submit");
backBtn.click(function(){
showHideOnStep(2);
})
continueBtn.removeAttr('type');//make continue button to submit again
break;
}
}
So let's say page loads and showHideOnStep(1) is applied by default. Everything's fine, clicking back will back, clicking Continue will go to Step 2.
But now, when clicking Continue, it will jump to submitting, instead of going to case 3 first.
It's like the actual "clicking" ends after it removes the "type=button" from the button and it propagates into that.
Same issue will happen when Backing from Step 2. Instead of going to Step 1, it will back for good.
I'm sure there is either of
a) a fairly simple fix for this or
b) a much better/cleaner way to do what I want
Any suggestion will be highly appreciated.
Please include the button html script! If the button was made from a form submit tag, it will submit without going to the next. Trying using a button tag.
// for checking
var secondbutton = false;
// checks if its been clicked
var firstb = document.getElementById('first');
function second() {
if(secondbutton == false) {
alert("first");
firstb.innerHTML = "Second";
secondbutton = true;
}
else {
alert("second")
}
}
<button id="first" onclick="second()">First</button>
This creates the illusion that it changed!

Prevent next button from working in Qualtrics

I have tried to make the working of the next button in Qualtrics conditional a certain variable value in javascript. If the condition is not met, I want to display an error message. However, with my current code (where the condition is not met) I see the error message briefly and then I progress to the next question anyways.
The javascript code is:
Qualtrics.SurveyEngine.addOnload(function()
{
var test = 0;
$('NextButton').onclick = function (event) {
event.preventDefault();
if (test==1){
Qualtrics.SurveyEngine.navClick(event, 'NextButton');
}
else
{
document.getElementById("errorMessage").innerHTML = "Error message";
}
}
});
And the html code is simply:
<div id="errorMessage"><span>This is a test</span></div>
I would really appreciate any help.
Thank you,
Lukas
Unfortunately, due to the way Qualtrics is setup, it is very difficult to hijack / override the next button's onclick event. The simplest workaround that I have found is to hide the actual next button, create a different button, and use that button for your expected actions.

Switch a button's functionality each time it's clicked

I am trying to alter the code given here: http://jsbin.com/iFesOvOs/1/edit in such a way that a single button would both start and stop the timer.
If the timer is stopped, it will get started n press of the button and if it is running, it will be stopped.
I need to do this because I am making a mobile site with lot of features and we do not have space to place an additional button.
What I have tried:
I have tried altering some attribute of the button, so that we can detect if the timer is running or not and take action as per that.
I have tried storing the timer's state in localStorage, fetch it back up and take action as per that.
I have tried keeping a global variable, but that too didn't work
Sometimes, the desired function didn't get executed at all (with no error messages) and sometimes, I got the error message of variables going out of scope - which I tried to rectify by use of global variables but only in vain.
What's wrong here, can someone help me out?
This works...
<input type="button" value="start" onclick="start(this);">
function start(b) {
if (b.value == 'stop'){
b.value = 'start'
clearInterval(clocktimer);
return
}
b.value = 'stop'
clocktimer = setInterval("update()", 1);
x.start();
}
You can add class with name (start) to your button, add function that check if the class button name is start then start the trimer and change the button class name to stop, else when the class name is stop then stop the timer and change the class name to start.

Need help to build a logic sequence to handle the scenario explained

This is the situation:
There is an interface with many input fields and a 'Save' button to update the inputs.
Saving will include many processes such as validation, user confirmation, adding comments or cancelling update.
To move away from this interface there are many options like click on tabs, click on different buttons, pressing keyboard shortcuts and other more.
The expected behavior when user tries to move away is the system should check for not updated fields and if any it should ask the use to update or ignore it.
If the user choose 'Ignore', no problem, proceed with the navigation.
But If the user choose 'Update' then the system should pause the current navigation and do the update handler witch contains many other procedures. After successful completion of these updating procedures the system should continue with paused interface navigation process from the point it is paused.
For a sample:
//something like this
$('#nxtPage').live("click", function(){
if (any field value changed){
var usrConf = confirm('You wanna update?')
if (usrConf){
// proceed with the updating processes by calling them
callDefaultFldUpdate(); // where this function includes many other procedures, so the return status wont help.
}
}
// the default page navigation process starts here
moveToNextPage();
}
So after the update procedures the system should continue with navigation procedure.
Hope the situation is clear and expecting useful suggestions from you all to build this logic using javascript && jquery.
Thanks in advance.
Set up a global variable, something like isChanged = false; then bind a function to form change event.
$(document).on('change', 'form', function(){
window.isChanged = true;
}
validate against the isChanged variable in your code where it says, for example
if (any field value changed){ can say if(isChanged == true){

Check the value of hidden field - Stay on page or Proceed to Next Page

I want to check the value of a hidden field triggered by a "h ref onClick" javascript function. If it is"empty", I want to prompt the user to rate my page using a ratings form (thereby staying on the same page and ignoring the h ref target page. If the value is "rated", I want to simply allow the user progress to their intended page.
Here is some code I've developed so far but doesn't really work that well:
function ratings_prompt(){
var checkIfRated = document.getElementById("hidden_rating");
if (checkIfRated.value == "empty")
{
alert("The Field is set to empty - please rate the form!");
checkIfRated.value=="rated";
}
}
Edit: Sorry but I cannot seem to get all the code into the codeblock.
GF
can't really help out all that much w/out seeing more code and also you didn't really say what the problem is..."doesn't really work that well" is kind of vague...but basically you would have in your link onclick your function call, and you should pass a "this" reference to the function, and you should have return false; in your onclick as well. Then in your function, if the hidden field is not empty, do like location.href = that.href
link
<script type='text/javascript'>
function yourFunction(that) {
if (document.getElementById("hidden_rating").value != "empty") {
location.href = that.href;
} else {
// didn't rate
}
}
</script>

Categories