Code edited. Apologizes for the incomplete first code
I've this code that takes input from the user, and it appends an image that matches that input. What I want to do is to set different buttons (200 aprox.) to append a different image if other button is pressed. The approaching I'm doing for this is to target the first if, within the first switch case, with the ("#id").length condition.
This is a short example of my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<section id="section">
<input id="input">
<button id="1"></button>
<button id="2"></button>
</section>
<div id="div"></div>
</body>
</html>
Javascript:
$(document).ready(function() {
var str;
$("#1, #2").click(function () { test(); });
});
var input = ['a','b','c'];
function test() {
var interval = setInterval(match, 1);
$("div").html("");
str = $("input").val().toLowerCase();
var i = 0;
function match() {
var imgs = ["<img src='https://1.bp.blogspot.com/-v2N2hPY33pc/V488gHu5aWI/AAAAAAAAHFM/loGVDK5OlGcft5UUz8-AHZjAd3E7OlZjACLcB/s1600/colorful-background-with-waves.jpg' alt='0'>",
"<img src='https://upload.wikimedia.org/wikipedia/commons/c/c8/Widget_icon.png' alt='1'>"];
if (i < str.length) {
switch (str[i]) {
case input[0]:
if ($("#1").length){
$("div").append(imgs[0]);
i++;
break;
}else if ($("#2").length){
$("div").append(imgs[1]);
i++;
break;
}
}
else {
clearInterval(interval);
$("input").val("");
}
}
}
Now, I've managed to make the if work, it shows the image, but if I press the second button, the else-if never works. What am I doing wrong?
Well I can't for the life of me figure out what you're trying to do with this code, but here is a working version of it...
$(document).ready(function() {
var str;
$("#1, #2").click(function () { test(this); });
});
var input = ['a','b','c'];
function test(caller) {
var interval = setInterval(match, 1);
var i = 0;
$("div").html("");
str = $("input").val().toLowerCase();
function match() {
var imgs = ["<img src='https://1.bp.blogspot.com/-v2N2hPY33pc/V488gHu5aWI/AAAAAAAAHFM/loGVDK5OlGcft5UUz8-AHZjAd3E7OlZjACLcB/s1600/colorful-background-with-waves.jpg' alt='0'>","<img src='https://upload.wikimedia.org/wikipedia/commons/c/c8/Widget_icon.png' alt='1'>","<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/100px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg' alt='2'/>","<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Corythucha_ciliata.jpg/120px-Corythucha_ciliata.jpg' alt='3'/>"];
if (i < str.length) {
switch (str[i]) {
case input[0]:
if (caller.id == "1") {
$("div").append(imgs[0]);
i++;
break;
} else if (caller.id == "2") {
$("div").append(imgs[1]);
i++;
break;
}
case input[1]:
if (caller.id == "1") {
$("div").append(imgs[2]);
i++;
break;
} else if (caller.id == "2") {
$("div").append(imgs[3]);
i++;
break;
}
}
} else {
clearInterval(interval);
$("input").val("");
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input"/>
<button id="1">1</button>
<button id="2">2</button>
<div></div>
Related
I´m creating a game and I've got stuck with a counter in a function.
I want the function to loop five times and then if my element "nocolnum" has a value of 5, i need the function to exit or break.
here is my html:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<span id="opt1"></span>
<span id="nocolnum">0</span>
</body>
</html>
here is my js:
function func(num) {
num = num + 1;
var opt = document.getElementById('opt1');
opt.innerHTML= num + "%" ;
var move = setTimeout("func("+num+")",15);
var nocolnum = document.getElementById('nocolnum');
if(num == 100){
nocolnum.innerHTML++;
clearTimeout(move);
}
if (nocolnum == 5) {
// I dont know what to put here
// to break out
// a break, return or something??
}
var one = 0;
func(one);
}
if (nocolnum == 5) {
// I dont know what to put here
// to break out
// a break, return or something??
return false;
}
If you want to break function you can simlpy return
if (nocolnum == 5) {
return true;
}
or
if (nocolnum == 5) {
return false;
}
I am new to Javascript programming, and need some help.
I have one HTML button, and I want to invoke 3 functions.
The first time I click the button, I want to invoke function 1.
The next time I click the button, I want to invoke function 2.
The third time I click the button, I want to invoke function 3.
I was thinking that I could use if tests.
i++ when button is clicked,
if ( i == 1){ function1(); } .....
HTML
<button type="button" onclick="myFunction()">Hei</button>
Javascript
if(i == 1){
test1();
}
if(i == 2){
test2();
}
if(i == 3){
test3();
}
function test1() {
document.getElementById("print1").innerHTML = "test1";
}
function test2() {
document.getElementById("print2").innerHTML = "test2";
}
function test3() {
document.getElementById("print3").innerHTML = "test3";
}
This is just for testing/practice, so the code has no point
But I think there has to be another way.
Try this:
<button onclick="myFun(i)"></button>
in javascript,
function myFun(i) {
(i===0 && function1()) || (i===1 && function2()) || function3();
}
//Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button onclick="triggerFunc()">Click Me</button>
</body>
</html>
//Javascript
var obj = {
f1: function() {
alert('from f1');
},
f2: function() {
alert('from f2');
},
f3: function() {
alert('from f3');
}
};
window.flag = 1;
function triggerFunc() {
var flag = window.flag + 1;
if(flag > 3){
flag = 1;
}
window.flag = flag;
obj['f'+ flag]();
}
just check the jsbin link http://jsbin.com/dudubaxafu/edit?html,js,output
You can do like following code :-
HTML code :-
<button type="button" onclick="myFunction()">Hei</button>
javascript code :-
i = 1;
function myFunction()
{
if (i == 1)
{
i++;
test1();
}
else if (i == 2)
{
i++;
test2();
}
else if (i == 3)
{
i++;
test3();
}
}
function test1() {
document.getElementById("print1").innerHTML = "test1";
}
function test2() {
document.getElementById("print2").innerHTML = "test2";
}
function test3() {
document.getElementById("print3").innerHTML = "test3";
}
It may help you.
I would not recommend polluting the global namespace via window["i"], which limits you to only one such button.
I would use something like this:
function cycle(){
var i = 0;
var args = arguments;
return function(){
args[i]();
i++;
if(i>=args.length)
i = 0;
}
};
then you can use it like so:
document.getElementById("button1").addEventListener("click", cycle(
function(){
alert(1);
},
function(){
alert(2);
},
function(){
alert(3);
}));
Here's a fiddle sample:
https://jsfiddle.net/h6qsam8e/
I try to display text come with typing text effect.i tried like this
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<span id="holder"></span>
</body>
<script>
(function($)
{
$.fn.writeText = function(content) {
var contentArray = content.split(""),
current = 0,
elem = this;
setInterval(function() {
if(current < contentArray.length) {
elem.text(elem.text() + contentArray[current++]);
}
}, 100);
};
})(jQuery);
$("#holder").writeText("This is some text");
</script>
</html>
It's work but i need display Paragraph content like this but now to call Paragraph content in writeText.
If it's not good way to display Pragraph like typing effect. Please tell me how to solved my problem .Please give me any idea.
Thanks in Advanced.
i have simply modified your code for this, you just need get the content of each para and pass each para to your writeText function()
Just give class="effect" to to be animated
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<span id="holder"></span>
<p class="effect">Hi, this is Gokul Praveen' PARA 1!</p>
<p class="effect">Hi, this is James Bond's PARA 2!</p>
</body>
<script>
(function($)
{
$.fn.writeText = function(content) {
var contentArray = content.split(""),
current = 0,
elem = this;
setInterval(function() {
if(current < contentArray.length) {
elem.text(elem.text() + contentArray[current++]);
}
}, 100);
};
})(jQuery);
$(".effect").each(function(index) {
var text = $( this ).text();
$(this).empty();
$(this).writeText(text);
});
//$("#holder").writeText("This is some text");
</script>
</html>
Execute the code in a browser and check. Don't forget to mark it correct!
I think this fiddle will do the trick
Js Fiddle
$.fn.typer = function (text, options) {
options = $.extend({}, {
char: ' ',
delay: 1000,
duration: 600,
endless: true
}, options || text);
text = $.isPlainObject(text) ? options.text : text;
var elem = $(this),
isTag = false,
c = 0;
(function typetext(i) {
var e = ({
string: 1,
number: 1
}[typeof text] ? text : text[i]) + options.char,
char = e.substr(c++, 1);
if (char === '<') {
isTag = true;
}
if (char === '>') {
isTag = false;
}
elem.html(e.substr(0, c));
if (c <= e.length) {
if (isTag) {
typetext(i);
} else {
setTimeout(typetext, options.duration / 10, i);
}
} else {
c = 0;
i++;
if (i === text.length && !options.endless) {
return;
} else if (i === text.length) {
i = 0;
}
setTimeout(typetext, options.delay, i);
}
})(0);
};
$('#foo').typer(['<i>Anyone</i> <u>is</u> <b>awesome</b>!', 'Foo bar.', 1337]);
I have a javascript text typer code:
CSS:
body
{
background-color:black;
}
#writer
{
font-family:Courier;
font-size:12px;
color:#24FF00;
background-color:black;
}
Javascript:
var text = "Help Please, i want help.";
var counter = 0;
var speed = 25;
function type()
{
lastText = document.getElementById("writer").innerHTML;
lastText+=text.charAt(counter);
counter++;
document.getElementById("writer").innerHTML = lastText;
}
setInterval(function(){type()},speed);
HTML:
<div id="writer"></div>
I want to know how can i use <br> tag (skipping a line or moving to another line). I tried many ways but failed, I want that if I Typed My name is Master M1nd. and then i want to go on the other line how would i go?
I've made a jQuery plugin, hope this will make things easier for you. Here is a live demo : http://jsfiddle.net/wared/V7Tv6/. As you can see, jQuery is loaded thanks to the first <script> tag. You can then do the same for the other <script> tags if you like, this is not necessary but considered as a good practice. Just put the code inside each tag into separate files, then set appropriate src attributes in the following order :
<script src=".../jquery.min.js"></script>
<script src=".../jquery.marquee.js"></script>
<script src=".../init.js"></script>
⚠ Only tested with Chrome ⚠
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery.fn.marquee = function ($) {
function findTextNodes(node) {
var result = [],
i = 0,
child;
while (child = node.childNodes[i++]) {
if (child.nodeType === 3) {
result.push(child);
} else {
result = result.concat(
findTextNodes(child)
);
}
}
return result;
}
function write(node, text, fn) {
var i = 0;
setTimeout(function () {
node.nodeValue += text[i++];
if (i < text.length) {
setTimeout(arguments.callee, 50);
} else {
fn();
}
}, 50);
}
return function (html) {
var fragment, textNodes, text;
fragment = $('<div>' + html + '</div>');
textNodes = findTextNodes(fragment[0]);
text = $.map(textNodes, function (node) {
var text = node.nodeValue;
node.nodeValue = '';
return text;
});
this.each(function () {
var clone = fragment.clone(),
textNodes = findTextNodes(clone[0]),
i = 0;
$(this).append(clone.contents());
(function next(node) {
if (node = textNodes[i]) {
write(node, text[i++], next);
}
})();
});
return this;
};
}(jQuery);
</script>
<script>
jQuery(function init($) {
var html = 'A <i>marquee</i> which handles <u><b>HTML</b></u>,<br/> only tested with Chrome. Replay';
$('p').marquee(html);
$('a').click(function (e) {
e.preventDefault();
$('p').empty();
$('a').off('click');
init($);
});
});
</script>
<p></p>
<p></p>
Instead of passing <br> char by char, you can put a \n and transform it to <br> when you modify the innerHTML.
For example (http://jsfiddle.net/qZ4u9/1/):
function escape(c) {
return (c === '\n') ? '<br>':c;
}
function writer(text, out) {
var current = 0;
return function () {
if (current < text.length) {
out.innerHTML += escape(text.charAt(current++));
}
return current < text.length;
};
}
var typeNext = writer('Hello\nWorld!', document.getElementById('writer'));
function type() {
if (typeNext()) setInterval(type, 500);
}
setInterval(type, 500);
Also probably you'll be interested in exploring requestAnimationFrame (http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/), for your typing animation :)
I have this JavaScript code:
<script type="text/javascript">
function timeMsg() {
var t=setTimeout("doRedirect()",10000);
}
function doRedirect() {
window.location.replace( "http://www.codemeh.com/" );
}
timeMsg();
</script>
But I want to show how much time is left in a box that floats at the top right, and with my l;ittle knowledge of JavaScript i have no idea where to start :(
Can someone help me?
(function(count) {
setInterval(function() {
if( count === 0) {
window.location.href = "http://www.codemeh.com/";
}
else {
document.getElementById('box_that_floats_top_right').innerHTML = 'Timeleft: ' + (count / 1000);
count -= 1000;
}
}, 1000);
}(10000));
Demo: http://www.jsfiddle.net/4yUqL/77/
A quick solution for you:
<input id="box" type="text" size="8" />
<script>
//Init vars
var milsec=0;
var sec=30;
var box = document.getElementById("box");
function display() {
if (milsec <= 0){
milsec=9;
sec-=1;
}
if (sec <= -1){
milsec=0 ;
sec+=1;
} else {
milsec-=1 ;
box.value = sec + "." + milsec;
//call function display after 100ms
setTimeout(function() {display();},100);
}
}
display();
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
timeLeft = 10;
function timeMsg() {
if(--timeLeft == 0) {
doRedirect();
} else {
$("#time").val(timeLeft);
setTimeout("timeMsg()",1000);
}
}
function doRedirect() {
window.location.replace( "http://www.codemeh.com/" );
}
$(document).ready(function() {
$("#time").val(timeLeft);
setTimeout("timeMsg()",1000);
});
</script>
<input id="time" size="5"></input>