I am learning javascript, and I am practicing what I learned by making a blackjack game. I have a system that deals cards fairly, but when I press the "deal" button the value of the card comes up but the buttons disappear. Why is this happening? Any help will be much appreciated. here is my code:
<!DOCTYPE html>
<html>
<head>
<title>casino game.</title>
<input type="button" value="deal" onclick="document.write(random)" id="deal">
<input type="button" value="hit" onclick="hit" id="hit">
</head>
<body>
<script type="text/javascript">
var deck = [11,2,3,4,5,6,7,8,9,10,10,10];
var random = deck[Math.floor(Math.random()*deck.length)]
</script>
<style type="text/css">
#deal{
position: fixed;
width: 50px;
height: 40px;
top: 100px;
}
#hit{
position: fixed;
width: 50px;
height: 40px;
top: 200px;
}
body{
text-align: center;
font-size: 30px;
background: url("");
}
</style>
</body>
</html>
Move your <input> inside <body> instead of <head>, and by using document.write() you are overwriting all the content of your HTML. You might want to write the result in a <div> instead.
<!DOCTYPE html>
<html>
<head>
<title>casino game.</title>
<style type="text/css">
#deal{
position: fixed;
width: 50px;
height: 40px;
top: 100px;
}
#hit{
position: fixed;
width: 50px;
height: 40px;
top: 200px;
}
body{
text-align: center;
font-size: 30px;
background: url("");
}
</style>
</head>
<body>
<input type="button" value="deal" onclick="deal()" id="deal">
<div id="result"></div>
<input type="button" value="hit" onclick="hit" id="hit">
<script type="text/javascript">
var deck = [11,2,3,4,5,6,7,8,9,10,10,10];
function deal() {
var random = deck[Math.floor(Math.random()*deck.length)];
document.getElementById('result').innerHTML = random;
}
</script>
</body>
</html>
DEMO
Related
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
<script>
calculus() {
floor_height = 0
height_input_code = document.getAttributeById("height_input").value
floor_height = height_input_code / 2.7
console.log('This height is approximately', floor_height, 'floors of a regular living building', target='output')
}
</script>
</style>
</head>
<body>
<div id="input">
<input type="number" step="any" id="height_input" style="margin:0; width: 1000px; height: 50px; font-size:2vw; border: solid 2px black">
<button type="button" onClick="calculus()" placeholder="✓" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">
</div>
<div id="output">
</div>
</body>
</html>
I've been trying to do a somewhat of a converter but i dont know how to submit variables through button and process them.
I tried 'attaching' to , after which is pressed, the code outputs an equivalent of meters in floors of a building for demonstration, but the log says that "calculus() is not defined", though it is cleadly in the and named accordingly. What am i doing wrong?
There are some errors on your code.
Firstly, your script is inside the style tag, but it shoud be outside.
Secondly, to define the function calculus you should use the function keyword function calculus() {}.
Thirdly, if you want to write the text into the output element, yous can not use the console.log function.
Finally, you should use getElementById instead of getAttributeById to fetch the element and then get the value.
The final code should be the next one:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
</style>
<script>
function calculus() {
floor_height = 0
height_input_code = document.getElementById("height_input").value
floor_height = height_input_code / 2.7
document.getElementById("output").textContent = 'This height is approximately ' + floor_height + ' floors of a regular living building'
}
</script>
</head>
<body>
<div id="input">
<input type="number" step="any" id="height_input" style="margin:0; width: 1000px; height: 50px; font-size:2vw; border: solid 2px black">
<button type="button" onClick="calculus()" placeholder="✓" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">
</div>
<div id="output">
</div>
</body>
</html>
Make your style and your script tags separate
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
</style>
<script>
calculus() {
floor_height = 0
height_input_code = document.getAttributeById("height_input").value
floor_height = height_input_code / 2.7
console.log('This height is approximately', floor_height, 'floors of a regular living building', target='output')
}
</script>
2 function compute needs to be defined as
function compute(e) {
3 You can't use console.log to send your log to an html element. Here's how to do it
document.getElementById("output").textContent = floor_height;
> I have this yellow box (with class="yellow-box") , and a small blue
box (with class="box-1") inside it. I need 12 times the same div in
HTML with JavascriptDOM - without hardcoding in HTML by typing 12
times the same div.
HTML code
<html>
<head>
<title>Match the box</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="boxGame.js"></script>
</head>
<body class="background-img">
<div class="yellow-box">
<div class="box-1"> </div>
</div>
</body>
</html>
.background-img {
background-image: url("fundal.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
.yellow-box {
background-color: yellow;
width: 850px;
height: 600px;
margin: auto;
top: 30px;
position: relative;
}
.box-1 {
background-color: blue;
width: 160px;
height: 120px;
float: left;
position: relative;
margin: 25px;
}
Add this code to your javascript file, or inside your script tag:
let outerDiv = document.querySelector('.yellow-box');
for(let i = 0; i++; i<=12 ){
let boxDiv = document.createElement('div');
div.setAttribute('class', 'box-1');
outerDiv.appendChild(boxDiv);
}
In this JavaScript example when user clicks on 'Change colors' button, it need to swap colors of two div elements. But it doesn't.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
background-color: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
background-color: green;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
But when I change it a little bit and remove 'background-color' from <style> and put it within <div> then it's working.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first" style="background-color: red;">Random text.</div>
<div id="second" style="background-color: green;">Random text.</div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
So is there any way to make it works for solution when 'background-color' is within <style> in <head>?
Element.style only applies to styles within the style attribute of the element. If you want the computed style, which factors in stylesheets and the like...
var firstElem = document.getElementById('first'),
secondElem = document.getElementById('second'),
firstBackground = window.getComputedStyle(firstElement).backgroundColor,
secondBackground = window.getComputedStyle(secondElement).backgroundColor;
firstElem.style.backgroundColor = secondBackground;
secondElem.style.backgroundColor = firstBackground;
This should swap the two colours, regardless of where they are defined.
For this case it whould be more common to use 3 classes in css. One for defining the common style of the divs. And two for defining the differences. Switching the appearance in that case whould just require switching of classes. Such a set-up is far more flexible also for example in combination with annimations.
A way to alter style using Javascript, without inline styling:
https://jsfiddle.net/6tyw211s/10/
<html>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
.color{
background-color: red;
}
.color1{
background-color: green;
}
</style>
<body>
<input type="button" id="color" value="Change colors" />
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
</body>
<script>
var y= document.getElementById('color');
var f=document.getElementById('first');
var s=document.getElementById('second');
y.addEventListener('click', function(){
if (f.className === "color1") {
f.className = "color";
}
else {
f.className = "color1";
}
if(s.className==="color"){
s.className="color1";
}
else{
s.className="color";
}
})
</script>
</html>
You can use switchClass() in jqueryui to do it.
That way, you don't have to specify the background-color values to the divs.
$("#color").click(function myFunction() {
$(".first").switchClass("first", "second", 200, "easeInOutQuad");
$(".second").switchClass("second", "first", 200, "easeInOutQuad");
});
Here is a working version with jqueryui
http://api.jqueryui.com/switchclass/
Please give me a clue how to achieve that with pure css?
I need to make 2 divs side by side and I have some element that is adding to the one of that divs, but far below it's bottom. The page automatically resizes then, but these 2 divs heights stays unchanged. Is it possible to make them still fit whole page as it is described in the css, or the only solution is to specify their exact heights by script?
Or maybe there's another way to make such a layout with a div added by script?
Let me show it in the fiddle:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
Thank you!
Short update: I just found, that neither html nor body heights were not updated after adding, but browser lets scroll to the newly added div. It's very strange behavior even for the css/html
I'm not sure exactly what you're aiming for, but maybe overflow: hidden is what you need? It will make it so the div won't expand to include that addition...
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
overflow: hidden;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
If you don't need scrolling - try position:fixed instead of absolute.
You don't need all this CSS, all you need to do is to set their height in CSS explicitely:
first to height: 100vh
after you add new element, to height: calc(100vh + X) where X is distance from initial divs bottom to bottom of the added element.
EDIT: Another solution with removed position: absolute:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html {
height: 100%;
}
body
{
display: flex;
min-height: 100%;
margin: 0 5rem 0 0;
}
div#col1
{
background: #eee;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
width: calc(100vw - 10rem);
}
div#dd
{
background: #f99;
border: 2px solid red;
margin-top: 2000px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
Ok, I am creating a landing page, where what I want to happen, is the page split in half, and either side slide off of the screen, and the main page is left. I almost have it, but what the right side is doing, is whenever the window is at certain sizes, it is going below the left side. I'm not sure quite how to fix this, and everything I try doesn't really work, and there I haven't been able to find any answers online. Thanks for any help
CODE
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0px;
background-color: gray;
}
#landingDiv {
min-width: 1100px;
height: 100vh;
}
#lBanText {
font-size: 50px;
}
#lBanText p {
top: 0;
bottom: 0;
position: relative;
margin: auto;
margin-top: 2px;
}
.lBan {
dispay: block;
width: 100%;
min-height: 60px;
background-color: red;
padding: 0px;
postion: relative;
float: left;
}
#leftHalf,
#rightHalf {
min-width: 50%;
position: relative;
float: left;
height: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>
Name of Site
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.addEventListener("keydown", checkKey);
function checkKey(e) {
var key = e.keyCode;
//alert(key);
if(key === 79) {
$("#leftHalf").hide("slide", {direction: "left"}, 1000);
$("#rightHalf").hide("slide", {direction: "right"}, 1000);
}
};
});
</script>
</head>
<body>
<div id="landingDiv">
<div id="leftHalf">
<div id="lBanText" class="lBan">
<p>
Title of Website Here
</p>
</div>
</div>
<div id="rightHalf">
<div class="lBan">
</div>
</div>
</div>
</body>
</html>