String Detected as Code

String Detected as Code - javascript

I can't figure out why this isn't working! All the code is being detected as code and not a string to be inserted as it should be. This is supposed to be a mouse follower. Since it is for a chrome extension it is meant to only be js.
The only code that is not supposed to be a string is:
var script = document.createElement("script");
and
script.appendChild(code);
document.body.appendChild(script);
var div = document.createElement("div");
var node = document.createTextNode("<img alt="pickle"
src="https://vignette.wikia.nocookie.net/rickandmorty/images/1/19/
Pickle_rick_transparent.png/revision/latest/scale-to-width-down/363?
cb=20171025014216">");
div.style.visibility = "hidden";
div.style.position = "absolute";
div.style.zIndex = "3";
div.appendChild(node);
document.body.appendChild(div);
var script = document.createElement("script");
var code = document.createTextNode("var firstevent = -1;
var supported = -1;
var xcurs=0;
var ycurs=0;
if (navigator.appVersion.indexOf("MSIE 5", 0) != -1 || navigator.appVersion.indexOf("MSIE 6", 0) != -1){
supported = 1;}
if (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 5){
supported = 1;}
if (navigator.appName == "Konqueror" && parseInt(navigator.appVersion) >= 5){
supported = 1;}
function updatePosition(e){
if(firstevent == -1 && supported != -1){
document.getElementById("jack").style.visibility = "visible";
firstevent = 1;};
if (navigator.appName == 'Netscape'){
xcurs = e.pageX;
ycurs = e.pageY;}
else{
xcurs = event.clientX;
ycurs = event.clientY;};
}
}
function showBat(){
if (supported != -1) {
supported = 1;
document.getElementById("jack").style.left = (xcurs+10) + "px";
document.getElementById("jack").style.top = (ycurs+2) + "px";
};
myTimeout=setTimeout('showBat()',10);
return;
}
myTimeout=setTimeout('showBat()',10);
document.onmousemove=updatePosition;");
script.appendChild(code);
document.body.appendChild(script);
var div = document.createElement("div");
var node = document.createTextNode("<img alt="pickle" src="https://vignette.wikia.nocookie.net/rickandmorty/images/1/19/Pickle_rick_transparent.png/revision/latest/scale-to-width-down/363?cb=20171025014216">");
div.style.visibility = "hidden";
div.style.position = "absolute";
div.style.zIndex = "3";
div.appendChild(node);
document.body.appendChild(div);
<!DOCTYPE html>
<html>
<body>
</body>
</html>

You're missing the end function bracket for function updatePosition(e)
function updatePosition(e){
if(firstevent == -1 && supported != -1){
document.getElementById("jack").style.visibility = "visible";
firstevent = 1;};
if (navigator.appName == 'Netscape'){
xcurs = e.pageX;
ycurs = e.pageY;}
else{
xcurs = event.clientX;
ycurs = event.clientY;};
}
}

Related

Stop loop in typewriting effect using JS

I found this typewriting effect on Codepen, which works great, however, I'm trying to stop the loop so the typewriting effect only loads once and no more. I tried asking the author but no answer. Can you point me in the right direction? Here's the link to the original https://codepen.io/Tbgse/pen/dYaJyJ
// function([string1, string2],target id,[color1,color2])
consoleText(['Divi Notes.', 'Divi Tips and Tricks', 'Made with Love.'], 'text', ['#BD6983', 'tomato', 'lightblue']);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden'
visible = false;
} else {
con.className = 'console-underscore'
visible = true;
}
}, 400)
}

You literally need to comment out one line of code:
// function([string1, string2],target id,[color1,color2])
consoleText(['Divi Notes.', 'Divi Tips and Tricks', 'Made with Love.'], 'text', ['#BD6983', 'tomato', 'lightblue']);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
//words.push(usedWord); <--- This one right here!
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
}
The general mechanics:
var usedWord = words.shift();
words.push(usedWord);
Takes the next word to say and then adds it to the end of the array. Assuming this is what keeps track of the words, to stop it at the very end simply remove the push
var usedWord = words.shift();
//words.push(usedWord);
As #mark_m says you should also stop the setInterval:
// function([string1, string2],target id,[color1,color2])
consoleText(['Divi Notes.', 'Divi Tips and Tricks', 'Made with Love.'], 'text', ['#BD6983', 'tomato', 'lightblue']);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
var interval = window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
//words.push(usedWord); <--- This one right here!
if(words.length==0) clearInterval(interval)
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
}
P.S. I realise this is your first post, but this is not a coding service. Show us how you tried to fix the issue. Otherwise you are unlikely to get a real response.

I'm not sure if you need the underscore at the end blinking or not so I just left it there.
Following changes are needed
Comment out the circular insertion into the arrays.
var usedColor = colors.shift();
//colors.push(usedColor);
var usedWord = words.shift();
//words.push(usedWord);
Stop interval at the the end of the array
var wordsInterval = window.setInterval(function() {
if(words.length == 0) {
window.clearInterval(wordsInterval);
return;
}
Here's whole code (working link https://codepen.io/anon/pen/LrqmPg)
// function([string1, string2],target id,[color1,color2])
consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text',['tomato','rebeccapurple','lightblue']);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
var wordsInterval = window.setInterval(function() {
if(words.length == 0) {
window.clearInterval(wordsInterval);
return;
}
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
//colors.push(usedColor);
var usedWord = words.shift();
//words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden'
visible = false;
} else {
con.className = 'console-underscore'
visible = true;
}
}, 400)
}
#import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
background: #111;
}
.hidden {
opacity:0;
}
.console-container {
font-family:Khula;
font-size:4em;
text-align:center;
height:200px;
width:600px;
display:block;
position:absolute;
color:white;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.console-underscore {
display:inline-block;
position:relative;
top:-0.14em;
left:10px;
}
<div class='console-container' id='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>
Edit: Without erasure (https://codepen.io/anon/pen/eKxrvM)
// function([string1, string2],target id,[color1,color2])
consoleText(['Hello World.', 'Console Text.', 'Made with Love.'], 'console-container',['tomato','rebeccapurple','lightblue']);
function consoleText(words, containerId, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var container = document.getElementById(containerId);
var targets = [];
words.forEach(() => {
var newTarget = document.createElement('span');
targets.unshift(newTarget);
container.prepend(newTarget);
});
var target = targets.shift();
target.setAttribute('style', 'color:' + colors[0])
var wordsInterval = window.setInterval(function() {
if(words.length == 0) {
window.clearInterval(wordsInterval);
return;
}
if (letterCount === 0 && waiting === false) {
waiting = true;
targets.length && (target = targets.shift());
//target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
//colors.push(usedColor);
var usedWord = words.shift();
//words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + (colors.length == 0? usedColor: colors[0]))
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = false;
letterCount = 0;
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden'
visible = false;
} else {
con.className = 'console-underscore'
visible = true;
}
}, 400)
}
#import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
background: #111;
}
.hidden {
opacity:0;
}
.console-container {
font-family:Khula;
font-size:4em;
text-align:center;
height:200px;
width:600px;
display:block;
position:absolute;
color:white;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.console-underscore {
display:inline-block;
position:relative;
top:-0.14em;
left:10px;
}
<div class='console-container' id='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>

just remove push() into words array, comment the following line, it is enough to typewrite it once.
words.push(usedWord);
PS: Clear interval should be used to avoid calling the function code again.
if(!words || words.length == 0){
clearInterval(t);
return;
}
Check Codepen for the demo

show / hide div can do without jquery?

I have a script that is now working, but there's still conflict with other scripts on page that I have no control over... (hosted e-com site with limited access) - is there a way to accomplish this, but with plain javascript?
var $b = jQuery.noConflict(true);
var d = new Date();
var dayOfWeek = d.getUTCDay();
var hour = d.getUTCHours();
var mins = d.getMinutes();
var status = 'open';
if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 12 && hour < 22)
status = 'open';
else
status = 'closed';
if (status=='open')
$b('.orderby').show();
else
$b('.orderby').hide();

You only have 1 tiny bit of jquery in your code
if (status=='open') {
$b('.orderby').show();
}else{
$b('.orderby').hide();
}
This can be converted to
if (status=='open') {
document.querySelector('.orderby').style.visibility = "visible";
}else{
document.querySelector('.orderby').style.visibility = "hidden";
}

You can use this:
var elem = document.querySelector(".elementClass");
elem.style.display = (status === 'open') ? 'block' : 'none';

Yes. You can use querySelectorAll to get elements and loop over them and add a class that will set display: none.
show
var el = document.querySelectorAll(".orderby");
for(var k in el){
el[k].className = el[k].className.replace("hide", "");
}
hide
var el = document.querySelectorAll(".orderby");
for(var k in el){
el[k].className += 'hide';
}

you could use this:
if (status=='open') {
document.getElementsByClassName('orderby')[0].style.display = "block";
}else{
document.getElementsByClassName('orderby')[0].style.display = "none";
}

Variable doesn't change with if statement

I'm facing an issue with Java Script.
I have a piece of code that creates rain inside a div and I need this rain to turn off and on according to my if statements.
Here is that JS code that makes rain work.
var nbDrop = 120;
// function to generate a random number range.
function randRange( minNum, maxNum) {
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// function to generate drops
function createRain() {
for( i=1;i<nbDrop;i++) {
var dropLeft = randRange(0,1280);
var dropTop = randRange(-500,590);
$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);
}
}
createRain();
So further I have a series of if statements and I want to change nbDrop variable which controls a number of drops. I want only one condition to result in raining, while others should set it to 0 value.
function displayAnswer(answer) {
var fortuneText = document.getElementById('answer');
if (chosenAnswer == 0){
nbDrop = 0;
}
else if (chosenAnswer == 1){
nbDrop = 0;
}
else if (chosenAnswer == 2){
nbDrop = 0;
}
else if (chosenAnswer == 3){
nbDrop = 0;
}
else if (chosenAnswer == 4){
nbDrop = 0;
}
else if (chosenAnswer == 5){
var nbDrop = 120;
// function to generate a random number range.
function randRange( minNum, maxNum) {
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// function to generate drops
function createRain() {
for( i=1;i<nbDrop;i++) {
var dropLeft = randRange(0,1280);
var dropTop = randRange(-500,590);
$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);
}
}
createRain();
}
}
A problem is that it only works once when the last if statement is true. But when other conditions are true, rain keeps going, so that variable doesn't change to 0 for some reason. It stays at 120.
Even though the button I use to click to change if statements condition has an even listener on it:
<button id="button1" onclick="displayAnswer();"></button>
Is there any way to make that nbDrop variable change to zero for all other if conditions, except one which should have it set to 120?

1: You should remove the "var" in condition == 5, as it is already declared.
else if (chosenAnswer == 5){
// var nbDrop = 120;
nbDrop = 120;
2: The commented method will not run when the nbDrop is 0 as i start on 1 and 1 can never be smaller than 0
function createRain() {
// for( i=1;i<nbDrop;i++) {
for( i=0;i<=nbDrop;i++) { // need to be like this
3: You have the } sign in a wrong place. Change it like this (see the "added" and "remove" comments in the code) or the "createRain" only gets called when condition == 5 is met. If you indent your code like below you will easier see within which code block things is.
Update Added an exit part in the "createRain" function
function displayAnswer(answer) {
var fortuneText = document.getElementById('answer');
if (chosenAnswer == 0){
nbDrop = 0;
}
else if (chosenAnswer == 1){
nbDrop = 0;
}
else if (chosenAnswer == 2){
nbDrop = 0;
}
else if (chosenAnswer == 3){
nbDrop = 0;
}
else if (chosenAnswer == 4){
nbDrop = 0;
}
else if (chosenAnswer == 5){
nbDrop = 120;
} // added
// function to generate a random number range.
function randRange( minNum, maxNum) {
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// function to generate drops
function createRain() {
if (nbDrop == 0) {
// remove the drop element(s)
$('.rain').children().remove();
// exit the function
return;
}
for( i=0;i<=nbDrop;i++) {
var dropLeft = randRange(0,1280);
var dropTop = randRange(-500,590);
$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);
}
}
createRain();
//} removed
}
And, as requested, here is the fully working web page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Magic 8 Ball</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body>
<div id="topmask"></div>
<div id="mainframe">
<div id="mainframe2">
<section class="rain"></section>
<div id="rocketdear"></div><div id="smokedear"></div><div id="launchsmokedear"></div>
</div>
<div id="bubble"></div>
<div id="bubbleHugecat"></div><div id="bubbleHugecatrays"></div>
<div class="sign">
<p id="question"></p>
<p id="answer"></p>
</div>
<div id="eight-ball">
<button id="button1" onclick="javascript:shake();"></button>
</div>
</div>
<div id="bottommask"></div>
<script>
var nbDrop;
function shake() {
var answersArrayed = ["Yes. So nothing happens", "No. Enjoy your consequences", "Ok, but that's something different", "My answer won't help you, deal with it!", "Your questions don't matter anymore", "Your questions make it rain again"];
// The question we asked
var question = prompt("Ask you question...");
var questionText = document.getElementById('question');
questionText.innerHTML = question;
// Number of possible answers
var numberOfAnswers = answersArrayed.length;
// Answers the 8 Ball can return
// Answer returned by our 8 Ball
var chosenAnswer = getAnswerNumber(numberOfAnswers);
displayAnswer(chosenAnswer);
// Returns a number based on the number of sides
function getAnswerNumber(answerCount) {
var number = getRandomInt(0, numberOfAnswers);
return number;
}
// Returns a random integer between two numbers
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
// Show our answer in the document
function displayAnswer(answer) {
}
// Access the DOM element we want to to change
var fortuneText = document.getElementById('answer');
if (chosenAnswer == 0) {
document.getElementById("bubble").className = "bubbleStill";
fortuneText.innerHTML = answersArrayed[0];
document.getElementById("smokedear").style.webkitAnimation = 'none';
document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
document.getElementById("rocketdear").style.webkitAnimation = 'none';
document.getElementById("bubble").style.webkitAnimation = 'none';
document.getElementById("bubble").style.opacity = "0";
document.getElementById("bubbleHugecat").style.opacity = "0";
document.getElementById("bubbleHugecatrays").style.opacity = "0";
document.getElementById("mainframe").style.backgroundImage = "url('desert23.svg')";
document.getElementById("smokedear").className = "smokestill";
document.getElementById("launchsmokedear").className = "launchsmokestill";
document.getElementById("rocketdear").className = "rocketstill";
nbDrop = 0;
}
else if (chosenAnswer == 1) {
fortuneText.innerHTML = answersArrayed[1];
document.getElementById("smokedear").style.webkitAnimation = 'none';
document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
document.getElementById("rocketdear").style.webkitAnimation = 'none';
document.getElementById("bubble").className = "bubbleExploading";
document.getElementById("bubble").style.webkitAnimation = '';
document.getElementById("bubble").style.opacity = "1";
document.getElementById("bubbleHugecat").style.opacity = "0";
document.getElementById("bubbleHugecatrays").style.opacity = "0";
document.getElementById("mainframe").style.backgroundImage = "url('desert23.svg')";
document.getElementById("smokedear").className = "smokestill";
document.getElementById("launchsmokedear").className = "launchsmokestill";
document.getElementById("rocketdear").className = "rocketstill";
nbDrop = 0;
}
else if (chosenAnswer == 2) {
fortuneText.innerHTML = answersArrayed[2];
document.getElementById("smokedear").style.webkitAnimation = 'none';
document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
document.getElementById("rocketdear").style.webkitAnimation = 'none';
document.getElementById("bubble").style.webkitAnimation = 'none';
document.getElementById("bubbleHugecatrays").style.opacity = "1";
document.getElementById("bubbleHugecat").style.opacity = "1";
document.getElementById("mainframe").style.backgroundImage = "url('desert23.svg')";
document.getElementById("bubble").className = "bubbleStill";
document.getElementById("bubble").style.opacity = "0";
document.getElementById("smokedear").className = "smokestill";
document.getElementById("launchsmokedear").className = "launchsmokestill";
document.getElementById("rocketdear").className = "rocketstill";
nbDrop = 0;
}
else if (chosenAnswer == 3) {
document.getElementById("smokedear").style.webkitAnimation = 'none';
document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
document.getElementById("rocketdear").style.webkitAnimation = 'none';
document.getElementById("bubble").style.webkitAnimation = 'none';
fortuneText.innerHTML = answersArrayed[3];
document.getElementById("bubbleHugecat").style.opacity = "0";
document.getElementById("bubbleHugecatrays").style.opacity = "0";
document.getElementById("bubble").className = "bubbleStill";
document.getElementById("bubble").style.opacity = "0";
document.getElementById("mainframe").style.backgroundImage = "url('desert_night.svg')";
document.getElementById("smokedear").className = "smokestill";
document.getElementById("launchsmokedear").className = "launchsmokestill";
document.getElementById("rocketdear").className = "rocketstill";
nbDrop = 0;
}
else if (chosenAnswer == 4) {
fortuneText.innerHTML = answersArrayed[4];
document.getElementById("smokedear").style.opacity = "1";
document.getElementById("launchsmokedear").style.opacity = "1";
document.getElementById("rocketdear").style.opacity = "1";
document.getElementById("smokedear").className = "smoke";
document.getElementById("launchsmokedear").className = "launchsmoke";
document.getElementById("rocketdear").className = "rocket";
document.getElementById("smokedear").style.webkitAnimation = '';
document.getElementById("launchsmokedear").style.webkitAnimation = '';
document.getElementById("rocketdear").style.webkitAnimation = '';
document.getElementById("bubble").style.webkitAnimation = 'none';
document.getElementById("mainframe").style.backgroundImage = "url('desert23.svg')";
document.getElementById("bubbleHugecat").style.opacity = "0";
document.getElementById("bubbleHugecatrays").style.opacity = "0";
document.getElementById("bubble").className = "bubbleStill";
document.getElementById("bubble").style.opacity = "0";
nbDrop = 0;
}
else {
fortuneText.innerHTML = answersArrayed[5];
document.getElementById("smokedear").style.webkitAnimation = 'none';
document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
document.getElementById("rocketdear").style.webkitAnimation = 'none';
document.getElementById("bubble").style.webkitAnimation = 'none';
document.getElementById("smokedear").className = "smokestill";
document.getElementById("launchsmokedear").className = "launchsmokestill";
document.getElementById("rocketdear").className = "rocketstill";
document.getElementById("mainframe").style.backgroundImage = "url('desert_rain.svg')";
document.getElementById("bubbleHugecat").style.opacity = "0";
document.getElementById("bubbleHugecatrays").style.opacity = "0";
document.getElementById("bubble").className = "bubbleStill";
document.getElementById("bubble").style.opacity = "0";
nbDrop = 120;
}
// function to generate a random number range.
function randRange(minNum, maxNum) {
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// function to generate drops
function createRain() {
if (nbDrop == 0) {
// remove the drop element(s)
$('.rain').children().remove();
// exit the function
return;
}
for (i = 0; i <= nbDrop; i++) {
var dropLeft = randRange(0, 1280);
var dropTop = randRange(-500, 590);
$('.rain').append('<div class="drop" id="drop' + i + '"></div>');
$('#drop' + i).css('left', dropLeft);
$('#drop' + i).css('top', dropTop);
}
}
createRain();
}
</script>
</body>
</html>

addEventListener onClick not working

I don't know what's wrong with my code, but when I use addEventListener() it doesn't do a thing.
Does anyone have another solution so that I can bind the #ibm button ID to compute() onClick event?
I plan to run this on Firfox OS, so setting an onClick attribute on the button itself is prohibited as stated on the CSP Violations.
function compute()
{
var w = parseInt(document.getElementById('weight').value);
var hf = parseInt(document.getElementById('height_ft').value);
var hi = parseInt(document.getElementById('height_in').value);
if (!checker(w))
{
showAndroidToast('Please input your weight');
return;
}
else if (!checker(hf))
{
showAndroidToast('Please input your height');
return;
}
if (!checker(hi))
{
var i = 0;
document.getElementById('height_in').value = i;
}
else
{
var i = parseInt(document.getElementById('height_in').value);
}
var comp_h = parseFloat((hf * 12) + (i * 1));
var tot_h = comp_h * comp_h;
comp = formula(w, tot_h);
document.getElementById('bmitot').value = comp;
if (comp > 30)
{
document.getElementById('res').value = 'Severe Level! Thats too much FAT! Go get some diet pills or something!';
document.getElementById("bmitot").style.backgroundColor = "red";
document.getElementById("zero").style.visibility = "hidden";
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "visible";
}
if (comp > 25 && comp <=29.9)
{
document.getElementById('res').value = 'Bad Level! You are too FAT!';
document.getElementById("bmitot").style.backgroundColor = "yellow";
document.getElementById("zero").style.visibility = "hidden";
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "visible";
document.getElementById("three").style.visibility = "hidden";
}
if (comp > 18.5 && comp <=24.9)
{
document.getElementById('res').value = 'Nice! You are on the safe level!';
document.getElementById("bmitot").style.backgroundColor = "green";
document.getElementById("zero").style.visibility = "hidden";
document.getElementById("one").style.visibility = "visible";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
}
if (comp < 18.5)
{
document.getElementById('res').value = 'Bad Level! Go get some nutrients!';
document.getElementById("bmitot").style.backgroundColor = "yellow";
document.getElementById("zero").style.visibility = "visible";
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
}
}
function formula(w, h)
{
var bmi = w/h * 703;
var a_bmi = Math.floor(bmi);
var dif = bmi - a_bmi;
dif = dif * 10;
diff = Math.round(dif);
if (dif == 10)
{
a_bmi += 1;
dif = 0;
}
bmi = a_bmi + "." + diff;
return bmi;
}
function checker(type)
{
if (isNaN(parseInt(type)))
{
return false;
}
else if (type < 0)
{
return false;
}
else
{
return true;
}
}
function showAndroidToast(toast)
{
Android.showToast(toast);
}
document.getElementById('ibm').addEventListener('click', compute);

Your code is executing fine and compute function is triggering fine. There may be an issue with the code in execute function. Check this fiddle

Decrements time in javascript

(second.innerHTML) -1 that worked but (num.innerHTML) -1 that not working why?
function doDcrements() {
var hidden = document.getElementById('hidden');
var second = document.getElementById('second'); // the second is 20.
var loopTimer = 0;
if (second.innerHTML != "0") {
second.innerHTML = (second.innerHTML) -1;
second.style.color = "blue";
loopTimer = setTimeout('doDecrements()',1000);
}else {
second.style.color = "grey";
hidden.style.display = "block";
}
}
.....................................................................................................................................................................
function doDcrements() {
var hidden = document.getElementById('hidden');
var second = document.getElementById('second'); // the second is 20.
var loopTimer = 0;
var num = document.getElementById('num'); // the number is 20.
if (second.innerHTML != "0") {
second.innerHTML = (num.innerHTML) -1;
second.style.color = "blue";
loopTimer = setTimeout('doDecrements()',1000);
}else {
second.style.color = "grey";
hidden.style.display = "block";
}
}
when I create it by for loop it not happens :
function doDcrements() {
var hidden = document.getElementById('hidden');
var second = document.getElementById('second');
for (i=20; i<=0; i--) {
if (second.innerHTML != "0") {
second.innerHTML = i;
second.style.color = "blue";
loopTimer = setTimeout('doDecrements()',1000);
}else {
second.style.color = "grey";
hidden.style.display = "block";
}
}
}
html code:
<div id="hidden">started</div>
<p id="second">20</p>
<div onClick="doDcrements();">Download</div>

Please look at your for loop:
for (i=20; i<=0; i--)
i=20 and i<=0. It will never run.

(second.innerHTML) -1 that worked but (num.innerHTML) -1 that not working why?
Without seeing your code, the only guess is that num.innerHTML is not giving you a string that is convertible to number. Examples:
'20' - 1 = 20
'<input name="xyz" val="20"/>' - 1 = NaN
Your HTML does't have any element with id="num". If this is the case, num will be null.
Changes
setTimeout(doDecrements,1000);
for (i=20; i >=0; i--)

We Keep Coding

JavaScript is the programming language of the Web.

String Detected as Code - javascript

Related

Stop loop in typewriting effect using JS

show / hide div can do without jquery?

Variable doesn't change with if statement

addEventListener onClick not working

Decrements time in javascript

Categories

Resources