Develop Reference

Js- How to restart setInterval after using clearInterval?

am using two simple buttons , one for scrolling and the other one for stoping the scroll,
the problem is :
when I reclick on the button of Scrolling after stop scrolling ,
the program
crash suddenly,
and gives me this error:
Uncaught TypeError: Cannot set properties of null (setting 'src')
the names of imgs are 1 to 6 jpg
for ex : firstphoto name is 1.jpg
so I use cnt to crossover them in the code
my code is :
var setBallsMove;
var cnt=1;
var getParent=undefined;
document.write("\x3Cbutton onclick='sideShowing()' type='button'> SideShowing !\x3C/button>");
document.write("\x3Cbutton onclick='stop()' type='button'> stop !\x3C/button>");
document.write("\x3Cdiv class='boy1' > \x3Cimg id=id"+cnt+" src='SlideShow/1.jpg' > \x3C/div>");
function sideShowing(){
getParent = document.getElementById("id"+cnt);
window.setBallsMove= setInterval(function slid (){
window.getParent.src="SlideShow/"+cnt+".jpg";
getParent.id="id"+cnt;
cnt++;
if (cnt==6) {
cnt=1;}}, 500);
}
function stop(){
window.clearInterval(setBallsMove);
setBallsMove=undefined;
getParent=undefined;
};
I hope I wrote all info correctly ,thanks for your Pacience

The problem is not related to setInterval and clearInterval. You update the getParent.id with cnt then increment cnt. So the getParent.id and cnt are different next time when you try to getElementById and hence you get null. You should increment cnt before updating getParent.src and getParent.id.
window.setBallsMove = setInterval(function slid() {
cnt++;
if (cnt == 6) {
cnt = 1;
}
window.getParent.src = "SlideShow/" + cnt + ".jpg";
getParent.id = "id" + cnt;
}, 500);
But simply speaking, you just don't need to, and shouldn't, change the id at all. If you want to store information in an HTML element, use a custom data-* attribute.

Delay Display of Text in Qualtrics using Javascript

(This is related to the unanswered question https://stackoverflow.com/questions/26745762/delaying-presentation-of-text-in-qualtrics)
I am working on a Qualtrics survey. I want to delay some text (say, text) being displayed - it should be hidden for 5 seconds, then display.
I found a resource here - Javascript for Qualtrics - that I can't get to work.
Drawing from this example, I try to replicate it by delaying the display of a photo. I do this to see if I can get this working before I go on to delaying the display of text as opposed to a photo.
In the HTML part, I put:
Time: <span id="time1">30</span><br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/%C3%81guila_calva.jpg/1280px-%C3%81guila_calva.jpg" style="width: 133px; height: 115px;" class='pic1' />
In the Javascript part, I have:
started = false;
function countDown1() {
if (!started)
started = true;
else {
var value1 = parseInt($('time1').innerHTML);
$('time1').innerHTML = value1 - 1;
if (value1 == 26) {
var styling1 = document.getElementsByClassName('pic1')[0];
styling1.style.display = "none";
}
}
setTimeout(countDown1, 1000);
}
Event.observe(window, 'load', countDown1);
For some reason, nothing happens at all with the timer or the photo.
Do I need to wrap the above Javascript in:
Qualtrics.SurveyEngine.addOnload(function()
{
});
I tried this as well, but no change.
So I really have two questions. 1. How do I modify the above code to get it working. And 2. How do I modify the working version of the code to display text after a certain amount of time?

You're making it more complex than need be.
Here is example html for the question:
This is a question. <span id="hiddentext" style="display:none">This text
will display after five seconds.</span>
Here is the javascript for the question:
Qualtrics.SurveyEngine.addOnload(function()
{
setTimeout("$('hiddentext').style.display = 'inline'",5000);
});

This hides the radiobuttons or Choices in a multiple choice question for 2 seconds. If you need to hide the next button as well you can add a Timing question from the ones already provided in Qualtrics and set it to "Enable submit after (seconds)".
Qualtrics.SurveyEngine.addOnload(function() {
var QID = this.questionId;
console.log(QID);
for (var i = 1; i < 4; i++) {
document.getElementById( QID + "-" + i + "-label" ).style.display="none";
}
(function(delay_container){
for (var i = 1 ; i < 4 ; i ++){
document.getElementById(QID + "-" + i + "-label").style.display="block";
}
}).delay(2,this.questionContainer);
});
Let's say you have two sentences that are two separate Descriptive text boxes. And you want the second box to appear some seconds after the first. The following worked for me when assigned for the second box. The same code works for following boxes as well. You can again put a Timing question at the end of the page to hide Next button.
Qualtrics.SurveyEngine.addOnload(function() {
var QID = this.questionId;
console.log(QID);
for (var i = 1; i < 4; i++) {
document.getElementById( QID).style.display="none";
}
(function(delay_container){
for (var i = 1 ; i < 4 ; i ++){
document.getElementById(QID).style.display="block";
}
}).delay(2,this.questionContainer);
});

Fade In don't work

I have wrote this javascript to show some images with id: imgFotogramma1/imgFotogramma2/ecc.. randomly in 8 different div with id Fotogramma1/Fotogramma2/ecc..:
function rullino() {
var immagini = new Array("strutture/1.jpg", "strutture/2.jpg", "strutture/3.jpg", "strutture/4.jpg", "strutture/5.jpg", "strutture/6.jpg", "strutture/7.jpg", "strutture/8.jpg", "strutture/9.jpg");
for (i = 1; i < 9; i++) {
var x = Math.floor(immagini.length * Math.random(1));
var imgId = "imgFotogramma" + i;
$(function () {
$(imgId).fadeIn(1000);
src = $(imgId).attr('src');
src = immagini[x];
alert(src);
});
}
setInterval("rullino()", 4000);
};
Now,this code start when body is loaded and its repeated every 4 seconds but i don't understand why the images are not displayed. I have started to work with Jquery not too much time ago and probably something are wrong.
I want to specify that: if i use normally javascript to assign to the src attribute the value of immagini[x],all work fine and the images are displayed.I have problem only to apply the fadein() motion.
I need a help to understand where is wrong,i have studied the fadeIn() API and i have tried to apply to my case.
Thanks in advance to anyone want to help me.

$(imgId).fadeIn(1000);
should be:
$('#'+imgId).fadeIn(1000);
Use # + idOfElemnt to select element with particular id.

You already doing it right. Just replace
var imgId = "imgFotogramma"+i;
With
var imgId = "#imgFotogramma"+i;
Since your are using the ID of the image, then your must have to use the "#" for id for applying the jQuery on it.

To select an ID, use # + elemID. Like this:
var imgId = "#imgFotogramma" + i;
Also, fade will not occur if the element is not hidden. First hide it, and then fade it in:
$(imgId).hide().fadeIn(1000);

how to add an auto expand to ace editor

im using the ace editor and im unable to modify it to autoexpand when the user input is longer than the current size:
here is how i have it currently (it has a handler for shift+enter), and it does not work.
Typist.prototype.heightUpdateFunction = function() {
var newHeight =
ac.getSession().getScreenLength()
* ac.renderer.lineHeight
+ ac.renderer.scrollBar.getWidth();
$(settings.id).height(newHeight.toString() + "px");
ac.resize();
};
Typist.prototype.createinput = function(settings,handler) {
var that = this;
var $typepad = $("<div/>" ,{
id : settings.id,
}).css({position:'relative', height: '40px'}) ;
$(that.place).append($typepad);
var ac = ace.edit(settings.id);
ac.commands.addCommand({
name : 'catchKeys',
bindKey : { win : 'Shift-Enter', mac : 'Shift-Enter' },
exec : function (ac) {
if (typeof handler === "function") {
handler(ac);
}
},
readOnly : false
});
that.heightUpdateFunction();
ac.getSession().on('change', that.heightUpdateFunction);
return true;
};
how would i get it to work? this current code does not.
How would i access the object that called the height update? (or the "id" of the div containing the ace editor, since i have several, each with an id reachable by
a.inpid
given
a = new Typist()
my attempt comes from reading this similar kind of problem i dont want to go that way because i will have several ace editors on the page, and i need to know the id of the one to apply the height adjustment to.

turns out i missed something simple
Typist.prototype.heightUpdateFunction = function() {
var newHeight =
ac.getSession().getScreenLength()
* ac.renderer.lineHeight
+ ac.renderer.scrollBar.getWidth();
$("#"+settings.id).height(newHeight.toString() + "px"); // i forgot $() needs '#'
ac.resize();
};
my bad. This omission kept me awake for hours.
EDIT:
see comment in the code to find my correction

javascript - trying to make an onClick alert based on id/class

I'm new to programming and was wondering how to make a customized alert that shows the id or class name of the object when I click on it. My site has a picture of 8 different animals, and I want it so that every time I click on one of the animals there's an alert with "This is a (animal's name)". Why won't my javascript code below work?
should i be using "this" instead of "parama"? i don't understand whether or not to have any parameters for my function clicky.
var images = new Array()
images[0] = "bison"
images[1] = "frog"
function clicky(parama){
for (entry in images){
if (parama.attributes["name"].value === images[entry]){
$(parama).onClick(alert("This is a" + parama.attributes["name"].value));
} else {
$(parama).onClick(alert("dang it");
}
}
}

using sort of a combination of both your answers, I figured out a way to do it with a lot less code than I originally had. Check it out! (images all had classes of "pic")
$('.pic').click(function(){
alert("This is a " + this.getAttribute('alt'))
});

I'd recommend to use the title or alt attribute on images instead of a JS array - that's more SEO friendly and semantic. Not to mention that alt is required on images to make your HTML valid - DEMO
var images = document.getElementsByTagName("img");
for ( var i = 0, count = images.length; i < count; i++ ) {
images[i].addEventListener("click", function() {
alert( this.getAttribute("alt") );
});
}
UPDATE
if you open to use jQuery - DEMO
$("img").on("click", function() {
alert( $(this).prop("alt") );
});​
You can use .click() but it's recommended to use .on() instead to attach different kind of event listeners to elements. jQuery also provides a shorthand for getting the properties - .prop()