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

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

Related

How to center terminal HTML

Fairly self explanatory.
<link href="C:\Users\Andre\Desktop\FOLDER\css\xterm.css" rel="stylesheet" /> <!--Terminal-->
<div id="terminal"></div>
<script src="./xterm.js"></script> <!-- Terminal -->
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello Again');
</script>
Here is my css file that it's connected to and how I tried to center it, I realize it's a different type, so I wasn't sure how to go about it
#terminal{
align-content:center;
}
Any help on centering this would be appreciated
#terminal {
text-align: center;
}
Maybe try this :
#terminal{
margin: auto;
width : 300px;
}

Display a django-from from JS

so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>

How to style the element which loads after computation of result in javascript?

I have created a simple addition program using HTML, CSS and Javascript.
HTML code is as follows:
<head>
<title>Input Output</title>
<link rel="stylesheet" type="text/css" href="io.css">
<body>
<h1>Sum App</h1>
<div class="container">
<script type="text/javascript" src="io.js"></script>
First Number <input type="text" id="numOne">
Second Number <input type="text" id="numTwo">
<button type="button" class="btn" onclick="submitBut()">Submit</button>
<p id="result"></p>
<div class="screen" id="screen1"></div>
</div >
The Javascript code is as follows:
function submitBut(){
var numOne= document.getElementById("numOne").value;
var numTwo= document.getElementById("numTwo").value;
var sum=parseInt(numOne)+parseInt(numTwo);
var element= document.createElement("p");
document.getElementById("result").innerHTML = sum;
}
I want to now style the result which as per the code seats in between paragraph tags with id "result".
What are the ways using which this is possible?
I tried using a standard style sheet format as below:
#result {
font-size: 45-px;
background-color= Yellow;
}
However, it is not working at all. Kindly let me know possible fixes.
Regards,
The problem is with the CSS you have written for this code. It's Invalid.
Change it like the following and it will work fine:
#result {
font-size: 45px;
background-color: yellow;
}

Javascript and Jquery Quotes generator

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()]);
});
});

Changing images by clicking links - Javascript

I have tried to create a simple JavaScript which was supposed to switch images when links are clicked. This is the code of the whole site (It's not much, but it was only meant to be a test):
<html>
<head>
<title>Slideshow</title>
<style type="text/css">
#wrapper {
width: 800px;
height: 250px;
margin: 75px auto auto auto;
}
</style>
<script type="text/javascript">
function changeImg(x) {
document.getElementById(presentationImg).src='x';
}
</script>
</head>
<body>
<div id="wrapper">
<div id="mainnav">
<ul>
<li>Design</li>
<li>Realisation</li>
<li>Deployment</li>
</ul>
</div>
<div id="presentation">
<img id="presentationImg" src="design.jpg" />
</div>
</div>
</body>
I was pretty sure it would work, but it doesn't, and I have no idea why... does anyone know why, and what the solution is?
Get rid of the quotes around x in your function, and quote the element ID instead:
document.getElementById("presentationImg").src = x;
You will also need to quote the string you pass in to your function:
<a href="#" onclick="changeImg('design.jpg')">
The way you have it currently, presentationImg will be undefined, as you haven't declared a variable of that name. To make it work the way you had it originally you could do this:
var presentationImg = "presentationImg";
document.getElementById(presentationImg).src = x;

Categories

Resources