We Keep Coding

cannot set innerHTML property of null on Qualtrics

I am using Qualtrics to make a survey, and I need to do a bit of JS to make a timer. Unfortunately, I'm constantly running into "cannot set innerHTML property of null" for element "s5".
I've read the other thread about this issue (albeit the OP doesn't seem to be using qualtrics), and thought that perhaps changing "Qualtrics.SurveyEngine.addOnload" to "Qualtrics.SurveyEngine.addReady" might do the trick, but it doesn't, and I've already tried changing the id's quite a few times to no avail. Could someone help me find where my error is?
I got marked previously for the same question (as something that's already been answered), but that thread didn't help me at all. I've tried ready() as shown in the commented out section in the first code snippet, but that only gave me a "startThinkingTimer is not defined" error. When I tried it the second way in the second code snippet, I didn't get any errors, but my timer wasn't visible/working at all either. I can't move script or use defer b/c Qualtrics does not have all the HTML/CSS/JS in one file, but has different sections for them and honestly I'm not sure how they connect the different files. Regarding using .on(), I'm not sure which event to use here, and would really like some help.
I've tried replacing all the document.getElementById for element "s5" with something like this:
$("s5").innerHTML="10";
but this doesn't work, either.
(Should I try to move the html code inside the JS portion (esp. the div timeShower part)? I'm not too sure how to do that though, so if someone could help me do that, that'd be awesome.)
window.thinkingTimer_;
window.typingTimer_;
Qualtrics.SurveyEngine.addOnload(function(){
that = this;
var thinkingTimeLimit = 15;
var typingTimeLimit = 10;
jQuery(".InputText").hide();
$('NextButton').hide();
document.getElementById("instructions5").innerHTML = "You have 15 seconds to think about the prompt and come up with your two most favourite fruits, either from the list or from your previous choices. Textboxes will appear when the time is up.";
function startTypingTimer() {
that.enableNextButton();
typingTimer_ = setInterval( function(){
if (typingTimeLimit > 0) {
document.getElementById("s5").innerHTML=pad(--typingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(typingTimeLimit/60,10));
}
if (typingTimeLimit == 0) {
clearInterval(typingTimer_);
jQuery("#NextButton").click();
}
}, 1000);
}
/*
$(function startThinkingTimer() {
that.disableNextButton();
thinkingTimer_ = setInterval( function(){
if (thinkingTimeLimit >0) {
document.getElementById("s5").innerHTML=pad(--thinkingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
}
if (thinkingTimeLimit == 0) {
clearInterval(thinkingTimer_);
document.getElementById("s5").innerHTML="10";
document.getElementById("minutes5").innerHTML="00";
jQuery(".InputText").show();
document.getElementById("instructions5").innerHTML = "You now have 10 seconds to type in the two fruits. The page will automatically move on to the next page once time is up.";
startTypingTimer();
}
}, 1000);
});
*/
function startThinkingTimer() {
that.disableNextButton();
thinkingTimer_ = setInterval( function(){
if (thinkingTimeLimit >0) {
document.getElementById("s5").innerHTML=pad(--thinkingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
}
if (thinkingTimeLimit == 0) {
clearInterval(thinkingTimer_);
document.getElementById("s5").innerHTML="10";
document.getElementById("minutes5").innerHTML="00";
jQuery(".InputText").show();
document.getElementById("instructions5").innerHTML = "You now have 10 seconds to type in the two fruits. The page will automatically move on to the next page once time is up.";
startTypingTimer();
}
}, 1000);
}
function pad (val) {
return val > 9 ? val : "0" + val;
}
startThinkingTimer();
});
<div id="instructions5"> </div>
<div id="timeShower1">time: <span id="minutes5">00</span>:<span id="s5">15</span></div>
window.thinkingTimer_;
window.typingTimer_;
Qualtrics.SurveyEngine.addOnload(function(){
that = this;
var thinkingTimeLimit = 15;
var typingTimeLimit = 10;
jQuery(".InputText").hide();
$('NextButton').hide();
document.getElementById("instructions5").innerHTML = "You have 15 seconds to think about the prompt and come up with your two most favourite fruits, either from the list or from your previous choices. Textboxes will appear when the time is up.";
function startTypingTimer() {
that.enableNextButton();
typingTimer_ = setInterval( function(){
if (typingTimeLimit > 0) {
document.getElementById("s5").innerHTML=pad(--typingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(typingTimeLimit/60,10));
}
if (typingTimeLimit == 0) {
clearInterval(typingTimer_);
jQuery("#NextButton").click();
}
}, 1000);
}
$(function () {
that.disableNextButton();
thinkingTimer_ = setInterval( function(){
if (thinkingTimeLimit >0) {
document.getElementById("s5").innerHTML=pad(--thinkingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
}
if (thinkingTimeLimit == 0) {
clearInterval(thinkingTimer_);
document.getElementById("s5").innerHTML="10";
document.getElementById("minutes5").innerHTML="00";
jQuery(".InputText").show();
document.getElementById("instructions5").innerHTML = "You now have 10 seconds to type in the two fruits. The page will automatically move on to the next page once time is up.";
startTypingTimer();
}
}, 1000);
});
/*
function startThinkingTimer() {
that.disableNextButton();
thinkingTimer_ = setInterval( function(){
if (thinkingTimeLimit >0) {
document.getElementById("s5").innerHTML=pad(--thinkingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
}
if (thinkingTimeLimit == 0) {
clearInterval(thinkingTimer_);
document.getElementById("s5").innerHTML="10";
document.getElementById("minutes5").innerHTML="00";
jQuery(".InputText").show();
document.getElementById("instructions5").innerHTML = "You now have 10 seconds to type in the two fruits. The page will automatically move on to the next page once time is up.";
startTypingTimer();
}
}, 1000);
}*/
function pad (val) {
return val > 9 ? val : "0" + val;
}
//startThinkingTimer();
});

.on('click', function(){}) only working on first click

I'm making a Blackjack game to exercise my Javascript skills. I had a bunch of alert() messages tied to the betting function to prevent invalid entries. In updating the code to have a more elegant message style than a browser alert, I wrote a function called alertModal() that pops up a message on the screen and then fades away. The message pops up the first time a user tries to enter an invalid bet, but does not pop up any other messages if the bet is invalid-- nothing happens. I know the placeBet() function is still running when the user clicks again, because if the bet is valid, dealFirstCards() runs and the game proceeds. So it seems to me that for some reason, the if/else portion of the placeBet() function is only running on the first click...
The game is live and running with this code at http://cnb-blackjack.netlify.com/game.html
Here is the javascript code in question:
// Player places a bet
$('div.bet').on('click', function() {
$(this).removeClass('glow');
$('.bet-button').addClass('glow');
});
$('.bet-button').on('click', function() {
event.preventDefault();
if (!placeBet.called) {
placeBet();
}
});
// PLACE BET
function placeBet() {
var $bet = parseInt($('.bet-input').val())
var $bank = parseInt($('.player-bank').text())
var $currentBet = $('.current-bet');
if (!isNaN($bet) && $bet <= $bank && $bet !== 0) {
$currentBet.text(' $' + $bet);
$('.bet input[type="text"]').val('');
$('.place-bet .hideaway').slideUp();
$('.player-bank').text($bank - $bet);
placeBet.called = true;
dealFirstCards();
} else if ($bet > $bank) {
var $message = 'Bet cannot exceed the amount in your Bank!';
alertModal($message);
} else if (isNaN($bet)) {
var $message = 'Enter a number, without "$".';
alertModal($message);
} else if ($bet === 0) {
var $message = "Betting nothing won't get you very far...";
alertModal($message);
}
}
// SHOW MODAL
function alertModal(message) {
$popUp = $('.alert-message');
$('.modal').removeClass('hide');
$popUp.text(message);
setTimeout(function() {
$('.modal').fadeOut(1000);
}, 1000);
}

function alertModal(message) {
$popUp = $('.alert-message');
$('.modal').show();
$popUp.text(message);
setTimeout(function() {
$('.modal').fadeOut(1000);
}, 1000);
}
As comments have explained, fadeOut is leaving the modal hidden after the first time it's clicked. Just call $(element).show(); on the modal to show it again and let fadeOut remove it.

Trigger a jQuery function from another file in JS

How I can call/trigger a jQuery function (which is in another file) from JS.
So basically this is the jQuery function (/js/animation.js).
$('#spin').click(function () {
var tickets = Math.floor(Math.random() * 200) + 1;
if(tickets < 51) {
var winner = 155;
}
else {
var winner = 145;
}
rouletteSpin(winner);
});
I know that its based on a codepen Roulette Animation.
Now the problem is that it should not roll without going through an if statement.
The statement should be a variable using Database info.
That's the point.
In my opinion you cant use PHP / select DB Info in jQuery so I decided to go into my index.php to trigger the jQuery function after the if statement in js went through.
So let me show you my HTML Button + JS Function:
onclick="openCase()
into the first HTML Button tag.
Now the JS Function:
<script>
var credits = CodeToGet_MYSQL_DB_Info_here_written_in_php;
function openCase() {
if(credits > 10000) {
spinIt();
}
else {
alert('Something went wrong');
}
}
And changed the jQuery Function (in path /js/animation.js) to the following:
function spinIt () {
var tickets = Math.floor(Math.random() * 200) + 1;
if(tickets < 51) {
var winner = 155;
}
else {
var winner = 145;
}
rouletteSpin(winner);
});
That is not working. I already googled a lot so please don't flame me.
Already used pretty much every method of this post:
calling Jquery function from javascript
Would be nice if someone can help me out!

Memory Game - how to get both card images to display before the alert pops

I have written code for a memory game in JavaScript. My problem is that I can't figure out why both cards selected don't show before the alert (saying that hooray they are the same/or no they don't match) pops up. I am confused because the alert is in the isMatch function which is run after both cards are clicked (isTwoCards function).
var isTwoCards = function(){
if (this.getAttribute('data-card') === 'king') {
this.innerHTML = '<img src="King.png" class = "myImgClass" alt="King"/>';
} else {
this.innerHTML = '<img src="Queen.png" class = "myImgClass" alt="Queen" />';
}
cardsInPlay.push(this.getAttribute('data-card'));
if (cardsInPlay.length === 2) {
isMatch(cardsInPlay);
}
};
var isMatch = function() {
if (cardsInPlay[0] !== cardsInPlay[1]) {
alert('Sorry, try again.');
cardElement.className = "";
} else {
alert('You found a match!')
};
cardsInPlay = [];
}
Here is the entire code: http://codepen.io/Lupeman/pen/GNgXrm
Any help would be greatly appreciated because it's driving me nuts! I'd like to do it without JQuery.

You would want to delay the isMatch checking until the UI finish updating and the user already done mouse up.
if (cardsInPlay.length === 2) {
setTimeout(function() {
isMatch(cardsInPlay);
}, 1000);
}

Timeout inside a function (javascript)

I've this code:
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
div.style.display = "block";
}
else
{
div.style.display = "none";
}
}
How to make it wait 2 seconds when executing div.style.display = "block"; ?
Thanks

You can use the function setTimeout to wait for a specified time (in milliseconds) before running some code.
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
setTimeout(function () {
div.style.display = "block";
}, 2000);
}
else
{
div.style.display = "none";
}
}
It might be worth considering adding and removing a class rather than setting the style directly. You can then handle all styles using CSS which helps with maintainability (and you can use CSS3 animations to fade/grow/shrink things in and out too).

This answers you question: the second parameter of setTimeout takes milliseconds so, 2000 milliseconds= 2 seconds
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
setTimeout(function(){div.style.display = "block";},2000);
}
else
{
div.style.display = "none";
}
}
If you need fadeIn or fadeOut effects you better consider using jquery library:
You need to include jquery library in order this to be working.....
function divHideShow(divToHideOrShow)
{
var time=600; //milli seconds alter this for changing speed
$("#"+divToHideOrShow).fadeToggle(time);
}