Javascript and Jquery Quotes generator - javascript

Hey I am trying to generate a random quotes using Javascript and Jquery.
Can someone tell me why it isn't working? I wrote a random generate function inside the document.ready and using it to generate random array index, but it is not out putting any quotes. Please help
<!DOCTYPE html>
<html>
<head>
<title>Random Quotes</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="box">
<p id="quotesBox"></p>
<button type="button" id="quoteButton" class="buttons" class="btn btn-primary">Give me a Quote</button>
<button type="button" id="clearButton" class="buttons" class="btn btn-primary">Clear</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
$(document).ready(function(){
var randomQuotes = [
"Doh",
"Mom, where's my meatloaf",
"This is spartan",
"Stay here,I will be back ",
"You talking to me? You talking to me??"
];
$("#quoteButton").on('click', function(){
function randomQuotes() {
return Math.floor(Math.random() * randomQuotes.length);
}
$("#quotesBox").text(randomQuotes[randomQuotes()]);
});
$("#clearButton").on('click', function(){
$("#quotesBox").text("");
});
});
#box {
height: 500px;
width: 500px;
background: rgb(205, 255, 255);
margin: 0 auto;
}
.buttons {
position: 0px 0px 0px 70px;
margin: 100px -130px 0px 150px;
border: 2px solid;
border-radius: 25px;
color: #FF00FF;
background: white;
}
#quotesBox {
font-weight: 600;
text-align: center;
padding-top: 150px;
}

You need to make the following changes to your javascript:
http://codepen.io/anon/pen/GqpBzj
var randomQuotes = [
"doh",
"Mom, where's my meatloaf",
"This is spartan",
"Stay here,I will be back ",
"You talking to me? You talking to me??"
];
$("#quoteButton").on('click', function() {
var x = Math.floor(Math.random() * randomQuotes.length);
$("#quotesBox").text(randomQuotes[x]);
});
$("#clearButton").on('click', function() {
$("#quotesBox").text("");
});
-Reasons For Changes-
1) You don't need the $(document).ready(function(){}); if you are simply adding event handlers
2) Refrain from defining functions within other functions when it is not necessary. You can simplify that by just passing the Math.floor(...) to a variable.
3) Don't be afraid to write things out. No reason to mega-condense things all into one line.
4) Keep function/variable names unique or more descriptive. It is confusing for other users when they see an array and a function with very similar names.

The function and array's name seems the same, it works when one of them is changed
$(document).ready(function(){
var randomQuotes = [
"Doh",
"Mom, where's my meatloaf",
"This is spartan",
"Stay here,I will be back ",
"You talking to me? You talking to me??"
];
$("#quoteButton").on('click', function(){
function getRandomQuotes() {
return Math.floor(Math.random() * randomQuotes.length);
}
$("#quotesBox").text(randomQuotes[getRandomQuotes()]);
});
});

Related

Cant change the background color of entire page with the click of a button

I was trying to change the color of body section with the click of a button with id="btn". but when I launch the index.html the background color is not changing. if any one has the solution please i want the concept behind the solution.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="butn">
<button type="button" id="btn">Click to change baackground</button>
</div>
<style src="main.js"></style>
</body>
</html>
CSS :
body {
margin: 0;
height: 100%;
text-align: center;
background-color: white;
}
.butn {
margin-top: 15%;
display: inline-block;
}
button {
height: 5rem;
width: 15rem;
border: none;
border-radius: 0.5rem;
}
JS code:
var color = [
"AntiqueWhite",
"CadetBlue",
"BurlyWood",
"Crimson",
"DarkSlateBlue",
"LightGoldenRodYellow",
"LightCyan",
];
var randomNumber = Math.round(Math.random() * 6);
document.getElementById("btn").addEventListener("click", function () {
changeBackground();
});
function changeBackground() {
console.log(color[randomNumber]);
document.body.style.backgroundColor = color[randomNumber];
}
Firstly, your js file should be in script tag and not in style tag.
Secondly, random number is getting generated only once when your js file loads, instead
move random number inside the changeBackground function, so that it can get a new number every time the button is clicked
As the randomNumber variable is outside the function, it only gets initialized once.
So you have to move the randomNumber to the function to generate random color every time you click on the button.
js
function changeBackground() {
var randomNumber = Math.round(Math.random() * 6);
console.log(color[randomNumber]);
document.body.style.backgroundColor = color[randomNumber];
}
And while including js file, you should write in this manner
<script src="main.js"></script>
You must put var randomNumber = Math.round(Math.random() * 6); inside the function changeBackground, otherwise it will only get this number once. This way, it gets a new number each time this function is called.
function changeBackground() {
var randomNumber = Math.round(Math.random() * 6);
console.log(color[randomNumber]);
document.body.style.backgroundColor = color[randomNumber];
}

Random Quote Button Not Working (Simple) (HTML, JS, CSS)

Good day,
I am trying to program a random quote generator and am currently unable to get the text to change. I'm sure that It's a simple mistake but any extra eyes would help because I tried another solution I saw and it also didn't work so I'm sure that I'm just missing something simple.
As always appreciate the help and will share anything else necessary to help resolve this. Thanks!
HTML
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#getMessage").on("click", function(){
$(".message").html("New Message");
});
});
</script>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<header>
Quote Generator.
</header>
<body>
I thought I'd provide some quotes for your edification.
<div id="wrapper">
<button class = "btn btn-primary" onClick="newQuote()">
Generate New Quote
</button>
</div>
<div class= "text-center">
<div id = "quoteDisplay">
Quote Here
</div>
</div>
<script src = javascript.js></script>
</body>
</html>
CSS
body {
background-image: url("http://www.planwallpaper.com/static/images/depositphotos_15858395-Abstract-swirls-seamless-pattern-background.jpg");
text-align: center;
font-size: 25px;
}
header {
text-align: center;
font-size: 45px;
font: 400 100px/1.3 'Lobster Two', Helvetica, sans-serif;
}
JS
var quotes = ["quote 1", "quote 2", "quote 3"];
function newQuote(){
var randomNumber = Math.floor(Math.random()*(quotes.length()));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
Array.length is a property, not a function:
quotes.length()
Should be:
quotes.length

Transfer jsfiddle to dreamweaver

I give. I can't seem to get the jsfiddle code to work when I transfer it to dreamweaver? I must be missing something simple?? It works fine in jsfiddle. I added the ready function as opposed to the onload, but it still is not working.
$("document").ready(function() {
var h1 = $('div#greeting h1');
h1.hide().contents().each(function() {
var words;
if (this.nodeType === 3) {
words = this.data.split(/\s+/).map(function(w) {
return '<span>' + w + '</span>';
}).join('');
$(this).replaceWith(words);
} else if (this.nodeType === 1) {
$(this).html($(this).html().split(/\s+/).map(function(w) {
return '<span>' + w + '</span>';
}).join(''));
}
});
h1.find('span').hide().each(function() {
if (!$.trim(this.innerHTML)) {
$(this).remove();
}
});
$('#start').on('click', function() {
h1.show().find('span').each(function(i, e) {
h1.queue(function(next) {
$.when($(e).fadeIn(150).fadeOut(150)).done(next);
});
});
});
$('#stop').on('click', function() {
h1.finish();
});
$('#reset').on('click', function() {
h1.finish();
});
.box {
border: 1px solid #E38E34;
background-color: #FFE7BF;
height: 150px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
#title {
margin: 5px;
border-bottom: 1px solid #E38E34;
color: #C46908;
font-weight: bold;
}
#message {
margin: 5px;
}
h1 {
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
<title>TedsCode</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="speedread.js"></script>
</head>
<body>
<div class="box" />
<div id="title"><span id="name">Title</span>
</div>
<div id="message" />
<div id="greeting" />
<input type="button" value="Read" id="start" />
<input type="button" value="Stop" id="stop" />
<input type="button" value="Reset" id="reset" />
<h1><center>This is a test to see if this script displays one word at a time and functions correctly.</center></h1>
</body>
</html>
You hava a syntax error in js.
I comment on something: add "});" to js, and remove redundant reference of jquery.
Code snippet works now
I can see two things:
1-Why are you using two version of jquery at the same time 1.9.1 and 2.1.0?
2-In the code you paste, the $("document").ready(function() {
isn't properly closed
Are you receiving any error in the console or the network ?

How to display javascript variables

I have looked up a question on the website (How to display javascript variables in a html page without document.write)
But when executing it in my own coding program it does not work. Hope you can help out!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}
</style>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
<script>
//https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event)){
$jsValue.innerHTML = $jsName.value;
}, false);
</script>
</body>
</html>
Because you have syntax error.. check the console.
Correct code should be:
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);

Why code that works on jsfiddle doesn't work locally?

I take a script from jsfiddle, and obviously it work, but when i try to run it locally, it stops to work. I read in another question that to use jsfiddle code, I need to put my script into:
$(document).ready(function() {
});
I do it for the following code, but it doesn't work even. Can someone please help me?
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
$('#btnName').click(function(){
var text = $('#inputName').val() + '<button>x</button>';
if(text.length){
$('<li />', {html: text}).appendTo('ul.justList')
}
});
$('ul').on('click','button' , function(el){
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
Two reasons:
Because you haven't included jQuery on the page. You need
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
somewhere before your script (with that path or some other valid path to jQuery).
The quotes here
<script type=”text/javascript”>
are fancy quotes. They must be normal quotes. Or, best practice, just don't include the type at all; JavaScript is the default.
It's also worth formatting your code in a reasonable, consistent way.
E.g.:
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
$('#btnName').click(function() {
var text = $('#inputName').val() + '<button>x</button>';
if (text.length) {
$('<li />', {
html: text
}).appendTo('ul.justList')
}
});
$('ul').on('click', 'button', function(el) {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>

Categories

Resources