EDIT: The "Create New Startup" button works with the "run code snippet" button in Stack Overflow, but not with index.html in chrome...
I have a button that's not firing the JS function.
Here's the HTML:
<button onclick="chooseStartup()" id="create">Create New Startup</button>
And here's the JS function:
var startupX = ['Uber', 'Google', 'Amazon', 'Apple', 'Facebook', 'Twitter'];
var startupY = ['Slack', 'Trello', 'Tesla', 'Hyperloop', 'Harvest'];
function chooseStartup() {
var x = startupX[Math.floor(Math.random()*startupX.length)];
var y = startupY[Math.floor(Math.random()*startupY.length)];
document.getElementById('startupX').innerHTML = x;
document.getElementById('startupY').innerHTML = y;
};
Any idea why it's not working?
After I fix this issue, how would I go about making the favorite button save the generated sentence -- and then clicking the print button to display all the saved favorites?
All my code is below
var startupX = ['Uber', 'Google', 'Amazon', 'Apple', 'Facebook', 'Twitter'];
var startupY = ['Slack', 'Trello', 'Tesla', 'Hyperloop', 'Harvest'];
function chooseStartup() {
var x = startupX[Math.floor(Math.random()*startupX.length)];
var y = startupY[Math.floor(Math.random()*startupY.length)];
document.getElementById('startupX').innerHTML = x;
document.getElementById('startupY').innerHTML = y;
};
<!DOCTYPE html>
<html>
<head>
<title>Mad Lib</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1 id="xForY"></h1>
<h1>A startup that is
<span id="startupX"></span>, but for
<span id="startupY"></span>
</h1>
<div id="inputs">
<button onclick="chooseStartup()" id="create">Create New Startup</button>
<button id="save">Favorite Startup</button>
<button id="print">Print Favorites</button>
</div>
<h2 id="favorites">
</h2>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='js/madlib-console.js'></script>
</body>
</html>
To favorite and then print it do the following: STEP 1
Change from this:
<button id="save">Favorite Startup</button>
<button id="print">Print Favorites</button>
To this:
<button onclick="doFav()" id="save">Favorite Startup</button>
<button onclick="printFav()" id="print">Print Favorites</button>
STEP 2
Insert the following code on the <script></script> portion of your HTML:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
} return ""; }
function doFav(){setCookie('myFav','A startup that is '+document.getElementById('startupX').innerHTML+' but for '+document.getElementById('startupY').innerHTML,1);}
function printFav(){document.getElementById('favorites').innerHTML = getCookie('myFav');}
Then pay attention because the setting of cookies locally is disabled by default. If you try this code online you will see that it runs without errors.
Related
I have a program where the user types in something and then something outputs in the "console." The most recent entered thing stays at the bottom unless the user scrolls up
The body of my document seems to be where I can dd effects like hidden scroll to it. I read another post and used scrollTop and scrollHeight and it is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href = "style.css">
</head>
<body id = "scroll">
<div id="game">
<div id="console">
</div>
</div>
<div id = "command-box">
<div id = "cmd">
<input id = "command" onkeypress = "doAThing(event);">
</div>
</div>
</div>
<script src = "variables.js"></script>
<script src = "code.js"></script>
</body>
</html>
var input = document.querySelector("#command");
var theConsole = document.querySelector("#console");
theConsole.scollTop = theConsole.scrollHeight;
var myScroll = document.getElementById("scroll");
function doAThing(event) {
var theKeyCode = event.keyCode;
if(theKeyCode === 13) acceptCommand();
setInterval(scrollUpdate, 1000);
}
function scrollUpdate() {
myScroll.scrollTop = myScroll.scrollHeight;
}
function acceptCommand() {
var p = document.createElement("p");
if(input.value === "hi") theConsole.append("Hi!", p);
if(input.value === "ping") theConsole.append("Pong!", p);
}
I have started doing a game, kinda similar to 'Spend Bill Gates Money', but I've said to change it up a bit.
I've done the first item, and I've tried to edit it with JS, so everytime you press "Buy", it will remove 1 dollar from you, or, when you press "Sell" to give you 1 dollar. The problem is, everytime I click, it only counts once. Plus, if I press "Buy", then "Sell", it gives me instantly 11 dollars, instead of 10 dollars.
Filename: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Spend you own money</title>
<script src="script.js">
</script>
<link rel="stylesheet" href="style.css">
<body>
<noscript>You need to enable javascript in order to have fun!</noscript>
<h1 class="center" id = "money">Money Left: 10</h1><!--Money = 100 000 000 000-->
<div class= "main">
<div class="pen">
<h2>Pen</h2>
<input type="submit" class="sell" value="Sell" onclick="sellpen()">
<!-- <input type="text" class="amount" value = 0 id = "amountpen" readonly="readonly" size="9%"> -->
<input type="submit" class="buy" value="Buy" onclick="amountpen()" >
</div>
</div>
</body>
</head>
</html>
Filename: script.js
var money = 10; //dollars
var pen = 1; // dollar
var mpen = money-pen;
var ppen = money+pen;
function amountpen() {
document.getElementById("money").innerHTML = "Money Left: " + mpen;
money = money-1;
}
function sellpen() {
document.getElementById("money").innerHTML = "Money Left: " +ppen;
money = money+
Your script.js would be like this:
var money = 10;
var pen = 1;
function amountpen() {
var mpen = money-pen;
document.getElementById("money").innerHTML = "Money Left: " + mpen;
money = money-1;
}
function sellpen() {
var ppen = money+pen;
document.getElementById("money").innerHTML = "Money Left: " +ppen;
money = money+1;
}
You can try with this JS code :
money = 10; //dollars
function amountpen() {
money--;
document.getElementById("money").innerHTML = "Money Left: " + money;
}
function sellpen() {
money++;
document.getElementById("money").innerHTML = "Money Left: " +money;
}
I need a button to only appear from 12pm-3pm on Monday-Friday. When it is not during those times, the item (button) needs to not be shown. We also need to account the different time zones for people who will be viewing the site. Any help would be greatly appreciated
My code right now only disables the button during 12pm-3pm. I have not been able to input for it to only work on certain days. Also, I think the time only accounts for the server's time zone (Pacific Standard) and not the user's.
<a href="#" target="_blank"><input id="live" class="bttHider live"
type="submit" onclick="showHidden(); showbttHidden();"
value="Livestream Video - STREAMING NOW" disabled></a>
<script>
var h = new Date().getHours();
if (h >= 12 && h <= 15) {
document.getElementById('live').disabled=false;
}
</script>
var today = new Date();
var day = today.getDay();
var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
console.log("Today is : " + daylist[day] + ".");
if(daylist[day]!="" && daylist[day]!="Sunday"){
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
if(hour>="12" && (hour<=3&&minute==0)){
$("#btn1").show();}
else{$("#btn1").hide()}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn btn-info" id=btn1>Basic</button></div></body></html>
So as the title says I'm trying to insert 'cookie' warning right after my wrapper div. I've tried using append as well but it adds the code after everything else is executed so div id wrapper lots of code and then at the end cookiebar div
var cname = "consentCookie";
var cvalue = "on";
var exdays = "20";
var cookiehtml = '\
<div id="cookiebar">\
We use cookies to track usage and preferences. \
I Understand.\
</div>';
function setCookie() {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
$('#cookiebar').hide();
}
function getCookie() {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
$(document).ready(function(){
if(getCookie() == ''){
$('#wrapper:first-child').after(cookiehtml);
}
else if(getCookie() == 'on'){
$('#cookiebar').hide();
}
});
and HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" type="image/ico" href="assets/logo/logo.ico">
<link rel="stylesheet" style="text/css" href="../cookiebar/cookiebar.css">
<link rel="stylesheet" style="text/css" href="css/styles.css">
<link rel="stylesheet" style="text/css" href="css/fonts.css">
<link rel="stylesheet" style="text/css" href="css/navigation_bar.css">
<link rel="stylesheet" type="text/css" href="css/lato_font.css">
<script src="js/jquery.min.js"></script>
<script src="../cookiebar/cookiebar.js"></script>
<script src="js/jquery.color-RGBa-patch.js"></script>
<script src="js/navigation_bar.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="League of Legends patch notes in a minimalistic and modern way.">
<meta name="keywords" content="league, of, league notes,legends, patch, notes, leaguenotes,Patch '.$Patch_No.' ">
<meta name="author" content="Kacper Turon">
<title>LeagueNotes - '.$Patch_No.'</title>
</head>
<body>
<div id="wrapper"></div>
I left just most important bits of code cuz there are loads of it
UPDATE: I've added the function that i use to create cookies and hide the bar, I've tried every suggestion so far and the cookiebar div lands next to wrapper as a sibling so
<div id="wrapper">
</div>
<div id="cookiebar">
</div>
And i want it to be as the first child in wrapper
Firstly, I'm not sure you're using :first-child as intended. You should probably be using simply :first or :eq(0).
But even still, you probably want to use insertAfter() rather than after().
$(document).ready(function(){
if(getCookie() == ''){
$('#wrapper:first-child').after(cookiehtml);
}
...
should thus be:
$(document).ready(function(){
if(getCookie() == ''){
$(cookiehtml).insertAfter( '#wrapper');
}
...
http://jsfiddle.net/grh1w80q/1/
Or if you prefer cookiehtml to be first node of parent #wrapper, use prependTo():
$(document).ready(function(){
if(getCookie() == ''){
$(cookiehtml).prependTo( '#wrapper');
}
...
http://jsfiddle.net/grh1w80q/2/
If you want cookiehtml to be the first element inside the wrapper div, in jQuery you can use prepend:
if(getCookie() == ''){
$('#wrapper').prepend(cookiehtml);
}
this would make the HTML DOM look something like:
<div id="wrapper">
<div id="cookiebar">
...
</div>
...
</div>
I'm trying to make an incremental type game. There is this website ,dmholley.co.uk, that gives the basic code.
The Problem: After buying cursors, the number of cursors does not change. It simply stays at 0.
Here is the index.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<body>
<button onclick="cookieClick(1)">Click Me!</button>
<br />
Cookies: <span id="cookies">0</span>
<br />
<button onclick="buyCursor()">Buy Cursor </button>
<br />
Cursors: <span id="cursors">0</span>
Cursor Cost: <span id="cursorCost">10</span>
<script type="text/javascript" src="main.js"></script>
</body>
Heres the main.js
var cookies = 0;
function cookieClick (number){
cookies = cookies + number;
document.getElementById("cookies").innerHTML = cookies;
};
var cursors = 0;
function buyCursor(){
var cursorCost= Math.floor(10*Math.pow(1.1,cursors));
if(cookies >= cursorCost){
cursors = cursors + 1;
cookies = cookies - cursorCost;
document.getElementByID('cursors').innerHTML = cursors;
document.getElementById('cookies').innerHTML = cookies;
};
var nextCost=Math.floor(10* Math.pow(1.1,cursors));
document.getElementById('cursorCost').innerHTML = nextCost;
};
window.setInterval(function(){
cookieClick(cursors);
}, 1000);
You have to click "Click me" at least 10 times for anything to happen.
Then click "Buy Cursor".
You will find you have an error in your code:
Note the case of the functions:
document.getElementByID('cursors').innerHTML = cursors;
document.getElementById('cookies').innerHTML = cookies;
Easy to fix!