Printing pictures from JavaScript

Printing pictures from JavaScript - javascript

I´m trying to print two pictures 24 times in a christmas calendar. The pictures I´m trying to print are innhold.gif and luke.jpg. When you click on luke.gif it´s supposed to change to innhold.gif. This is gonna happen in sirkel-div. But it´s only white. I can´t find out whats wrong either by myself or by inspect in Google chrome.
My question is, how can I change this code so when people click on luke.jpg it changes to innhold.gif?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Westerdals julekalender 2017 - Din julekalender</title>
</head>
<body>
<!--Header-->
<header>
<h1>Westerdals julekalender 2017</h1>
</header>
<!--Meny-->
<nav>
<ul>
<li>Forsiden</li>
<li>Din julekalender</li>
</ul>
</nav>
<!--Content from cookie-->
<section>
<p id="cookie-innhold">Her kommer cookie-innhold</p>
</section>
<!--Kalenderen-->
<div id="kalender-div">
<p id="peker-info"></p>
</div>
<div id="luke-div"></div>
<script>
(function(){
//Array
let tekstArray = document.cookie.split("=");
let tekst = tekstArray[1];
let SirkelDiv = document.getElementById("sirkel-div");
let body = document.getElementsByTagName("body")[0];
let html = document.documentElement;
document.getElementById("cookie-innhold").innerHTML = " " + tekst;
//Style av kalender
for(let i = 0; i < 24; i++){
let nySirkel = document.createElement("div");
nySirkel.style.cssText = "width: 300px; height: 300px; backround-image: url('images/innhold.gif');";
nySirkel.style.cssText += "border: 2px solid black; opacity: 0.7;";
nySirkel.style.cssText += "border-radius: 50%; float: left; margin: 5px;";
nySirkel.innerHTML = (i + 1);
nySirkel.onclick = openLuke;
body.appendChild(nySirkel);
}
function openLuke(){
this.style.backgroundImage = "url('images/luke.jpg');";
}
}());//End function
</script>
</body>
</html>

Besides the typo you have in the cssText assignment, you are trying to set an invalid css property value
"url('images/luke.jpg');"
; is not valid as part of the backgroundImage property remove it. The browser is not assigning the value since it is invalid.
(function() {
let body = document.body;
//Style av kalender
for (let i = 0; i < 24; i++) {
let nySirkel = document.createElement("div");
nySirkel.style.cssText = "width: 300px; height: 300px; background-image: url('http://lorempixel.com/output/technics-q-c-640-480-1.jpg');";
nySirkel.style.cssText += "border: 2px solid black; opacity: 0.7;";
nySirkel.style.cssText += "border-radius: 50%; float: left; margin: 5px;";
nySirkel.innerHTML = (i + 1);
nySirkel.onclick = openLuke;
body.appendChild(nySirkel);
}
function openLuke() {
this.style.backgroundImage = "url('http://lorempixel.com/output/people-q-c-640-480-1.jpg')";
}
}()); //End function
<header>
<h1>Westerdals julekalender 2017</h1>
</header>
<!--Meny-->
<nav>
<ul>
<li>Forsiden</li>
<li>Din julekalender</li>
</ul>
</nav>
<!--Content from cookie-->
<section>
<p id="cookie-innhold">Her kommer cookie-innhold</p>
</section>
<!--Kalenderen-->
<div id="kalender-div">
<p id="peker-info"></p>
</div>
<div id="luke-div"></div>

Related

How can I update attributes with jQuery?

$(document).ready(function() {
var hero_image = new Array();
hero_image[0] = new Image();
hero_image[0].src = 'assets/images/link.png';
hero_image[0].id = 'image';
hero_image[1] = new Image();
hero_image[1].src = 'assets/images/bongo.png';
hero_image[1].id = 'image';
hero_image[2] = new Image();
hero_image[2].src = 'assets/images/gandondorf.jpg';
hero_image[2].id = 'image';
hero_image[3] = new Image();
hero_image[3].src = 'assets/images/queen.png';
hero_image[3].id = 'image';
var young_hero = ["Link", "Bongo Bongo", "Gandondorf", "Queen Gohma"];
var health = [100, 70, 120, 50];
var attack_power = [];
var counter_power = [];
console.log(hero_image[0]);
function it_is_over_9000(){
for (var i = 0; i < young_hero.length; i++) {
var x = Math.floor(Math.random(attack_power)*20) + 3;
var y = Math.floor(Math.random(attack_power)*10) + 3;
attack_power.push(x);
counter_power.push(y);
}
}
function ready_board(){
it_is_over_9000();
for (var i = 0; i < young_hero.length; i++) {
var hero_btns = $("<button>");
hero_btns.addClass("hero hero_button");
hero_btns.attr({
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
hero_btns.text(young_hero[i]);
hero_btns.append(hero_image[i]);
hero_btns.append(health[i]);
$("#buttons").append(hero_btns);
}
}
function char(){
$(".hero_button").on("click", function() {
var hero = $(this);
var hero_select = hero.data('index');
for (var i = 0; i < young_hero.length; i++) {
//var attack = ;
if (i != hero_select){
var enemies = $("<button>");
enemies.addClass("hero enemy");
enemies.attr({
"data-power" : it_is_over_9000(),
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
enemies.text(young_hero[i]);
enemies.append(hero_image[i]);
enemies.append(health[i]);
$("#battle").append(enemies);
}
}
$("#buttons").html($(this).data('name','health','image'));
defender();
});
}
function defender(){
$(".enemy").on("click", function() {
var enemy = $(this);
var enemy_select = enemy.data("index");
console.log(enemy_select);
for (var i = 0; i < young_hero.length; i++) {
if (i == enemy_select) {
var defender = $("<button>");
defender.addClass("hero defender");
defender.attr({
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
defender.text(young_hero[i]);
defender.append(hero_image[i]);
defender.append(health[i]);
$("#defend").append(defender);
$(this).remove();
}
}
});
}
$(".defend_button").on("click" , function(){
if($(".defender").data("health") == 0){
$(".defender").remove();
}
$(".defender").attr({
"data-health": $(".defender").data("health") - $(".hero_button").data("attack")
});
});
ready_board();
char();
});
I am trying to make a RPG game and I have the characters being generated the way I want them too but on the $(".defend_button").on("click" , function() at the end it doesn't update the data-health as it should. It only updates once but upon many clicks on the defend-button it doesn't update past the first time.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zelda</title>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.2.0.min.js'></script>
<script type = "text/javascript" src = "assets/javascript/game.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<style type="text/css">
.hero { width: 125px; height:150px; border-style: solid; padding: 2px; float: left; margin: 2px; float: left; }
.letter-button-color { color: darkcyan; }
.fridge-color { color: orange; }
#display { margin-top:78px; height:500px; width:220px; margin-left:60px; }
#buttons { padding-top:60px; }
#clear { margin-left: 20px; font-size: 25px; color: black; border-style: solid; width: 100px; }
#image{width: 100px; height: 100px; margin-left: 10px; }
</style>
<body>
<div class="row">
<div class="col-md-8">Select Your Character</div>
</div>
<div class="row">
<div id="buttons" class="col-md-8"></div>
</div>
<div class="row">
<div id="battle" class="col-md-8">
</div>
</div>
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary defend_button">Defend</button>
</div>
</div>
<div class="row">
<div id="defend">
</div>
</div>
</body>
</html>

You have to use .data() to update the health value.
var battleResult = $(".defender").data("health") - $(".hero_button").data("attack");
console.log("battleResult should be: "+battleResult );
$(".defender").data({
"health": battleResult
});
I played a little with your game.
I found how to update the health display below the image too...
Since only updating the data wasn't changing anything on the screen.
So, I left the above code there, for you to see it is effectively working.
But since you have to re-create the button to update health on scrreen... It is kind of useless.
I also fixed the death condition
from if($(".defender").data("health") == 0){
to if($(".defender").data("health") <= 0){
I have to stop here before changing to much things.
See it in CodePen
Check your loop in it_is_over_9000(), because I think it is running uselessly too often.
And a dead defender has to be "buried" (lol).
Because when it is killed, a click on the defend button is kind of ressurrecting it.
;)

Try setting the attribute like this. Also, I recommend putting $(".defender") in a variable so you aren't requerying it each time.
var defender = $(".defender");
var loweredHealth = defender.data("health") - $(".hero_button").data("attack");
defender.attr('data-health`, loweredHealth);
Update:
It looks like the $('.defender') call will return multiple items. You either need to select a specific defender or iterate through them individually like so:
$('.defender').each(function(i, nextDefender) {
var loweredHealth = nextDefender.data("health") - $(".hero_button").data("attack");
nextDefender.attr('data-health`, loweredHealth);
});`

How to dynamically create table in html with certain constraints?

i want to take input from user(number) and display image as many times as number.If user inputs 5 then the image should be displayed 5 times next to each other with corresponding number below the images-Below 1st image '1' 2nd Image '2'.Basically putting this table in loop.
<HTML>
<BODY>
<TABLE>
<TR>
<TD>
<IMG SRC="C:/Users/User/Desktop/RE/G.JPG">
</TD>
</TR>
<TR><TD ALIGN="CENTER">1</TD>
</TABLE>"
</BODY>
</HTML>

You can use jQuery for this task and write a function that generates HTML with a dynamic value:
Complete Solution
<HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function generateTable(number) {
return "<table><tr><td>" +
"<img src='C:/Users/User/Desktop/RE/G.JPG'></td></tr><tr><td align='center'>" +
number +
"</td></table>";
}
$(function(){
var userInput = 3;
for (var i = 0; i < userInput; i++) {
$('#dynamic').append(generateTable(i + 1));
}
});
</script>
</head>
<body>
<div id='dynamic'></div>
</body>
</html>

You can add an input and a button to trigger the function.
You could also check if the inserted value is actually a number or not.
$(document).on('click', '#add', function() {
var that = $(this);
var times = parseInt($('#times').val());
for (i=1;i<=times;i++) {
$('#table-wrp').append('<table class="table-times"><tbody><tr><td><img src="http://code52.org/aspnet-internationalization/icon.png" /></td></tr><tr><td>' + i + '</td></tr></tbody></table>');
}
});
$(document).on('input', '#times', function() {
var that = $(this);
var value = that.val();
if ((value != '' || value != false) && !isNaN(value)) {
$('#add').prop('disabled', false);
} else {
$('#add').prop('disabled', true);
}
});
#table-wrp {
height: 80px;
}
.table-times {
width: 100px;
height: 80px;
float: left;
border-collapse: collapse;
}
.table-times td {
border: 1px solid #d8d8d8;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="textbox" id="times" />
<button id="add" disabled>Add</button>
<div id="table-wrp"></div>

Or for a pure javascript version of Pugazh's answer
var tab = "<div></div>";
var num = prompt("Enter a number");
for(i = 0; i < num; i++){
document.getElementById('tab').innerHTML += "<div><div><img src='http://placehold.it/150x150'></div><div></div></div>";
}
img{
float: left;
box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
height: 100px;
width: 100px;
margin: 10px;
}
<div id="tab"></div>
This will work just as well, but doesn't require jQuery as well.

<HTML>
<BODY>
<div id="tbl"></div>
</BODY>
</HTML>
<script>
var num = prompt("Enter a number");
var div=document.getElementById("tbl");
var l1='',l2="";
for(i=0;i<num;i++)
{
l1 += '<td><img src="C:/Users/User/Desktop/RE/G.JPG"></td>';
l2 += '<td>'+i+'</td>';
}
div.innerHTML = "<table><tr>"+l1+"</tr><tr>" + l2 + "</tr></table>";
</script>

Try this
$(function() {
var tab = "<div></div>";
var num = prompt("Enter a number");
for (i = 0; i < num; i++) {
$("#tab").append("<div class='left'><div><img src='http://placehold.it/150x150'></div><div>" + (i + 1) + "</div></div>");
}
});
div.left {
display: inline-block;
margin-right: 5px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="tab">
</div>
</body>
</html>

Could help me to resolve mouse events?

<script>
var theNumOfWins;
var part;
theNumOfWins = 0;
function openWindow(){
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"-1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
part = partOfWindow("headerOfWindow",theNumOfWins,part.id);
setCSS(part.css,"1","400px","25px","#65A8E8","relative","0px","0px","initial","none");
part = partOfWindow("zoneOfWindowPosition",theNumOfWins,part.id);
setCSS(part.css,"1","204px","22px","transparent","absolute","192px","4px","move","1px solid red");
document.getElementById("5").innerHTML = document.getElementById(part.id).attributes[2].value;
theNumOfWins++;
}
function partOfWindow(name,theNumOfWins,parent){
var id;
var css;
var idAndCSS;
var tag;
var att;
id = name + "Id" + theNumOfWins;
css = name + "CSS";
tag = document.createElement("div");
tag.setAttribute("id",id);
tag.setAttribute("class",css);
document.getElementById(parent).appendChild(tag);
idAndCSS = {
tag: tag,
id: id,
css: css
}
return idAndCSS;
}
function setCSS(className,zIndex,width,height,backgroundColor,position,left,top,cursor,border){
var i;
var cssPart;
cssPart = document.getElementsByClassName(className);
document.getElementById("1").innerHTML = cssPart.length;
document.getElementById("2").innerHTML = cssPart[0];
document.getElementById("3").innerHTML = cssPart[1];
document.getElementById("4").innerHTML = cssPart[2];
for(i=0; i < cssPart.length; i++){
cssPart[i].style.zIndex = zIndex;
cssPart[i].style.width = width;
cssPart[i].style.height = height;
cssPart[i].style.backgroundColor = backgroundColor;
cssPart[i].style.position = position;
cssPart[i].style.left = left;
cssPart[i].style.top = top;
cssPart[i].style.cursor = cursor;
cssPart[i].style.border = border;
}
}
</script>
Hi!!! I need help!!!
I made a object of "div".
and then I added one more "div" into first "div".
second "div" is a red box. You can see it when you click the "+"mark.
But, second "div" has mouse event, and the event does not work.
I want to change mouse cursor when cursor become on the red box.
Why does not the mouse event work?
My last purpose is to make window object.
And there will be a lot of mouse events.
I already made window object similar to this one. However, it also did not work.
How can I try mouse event?
This is my full source: https://drive.google.com/file/d/0B4p8lZSEMXcqZUdacVJyVlBiUWc/view?usp=sharing

This is a CSS issue. Your problem is here:
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"-1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
Specifically, where you set the z-index to -1, by doing so you place the div and everything contained in it under the active layer so to speak. As such the hover event doesn't propagate to your div. change this to 1 and the cursor will behave as expected.
var theNumOfWins;
var part;
theNumOfWins = 0;
function openWindow(){
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
part = partOfWindow("headerOfWindow",theNumOfWins,part.id);
setCSS(part.css,"1","400px","25px","#65A8E8","relative","0px","0px","initial","none");
part = partOfWindow("zoneOfWindowPosition",theNumOfWins,part.id);
setCSS(part.css,"1","204px","22px","transparent","absolute","192px","4px","pointer","1px solid red");
document.getElementById("5").innerHTML = document.getElementById(part.id).attributes[1].value;
theNumOfWins++;
}
function partOfWindow(name,theNumOfWins,parent){
var id;
var css;
var idAndCSS;
var tag;
var att;
id = name + "Id" + theNumOfWins;
css = name + "CSS";
tag = document.createElement("div");
tag.setAttribute("id",id);
tag.setAttribute("class",css);
document.getElementById(parent).appendChild(tag);
idAndCSS = {
tag: tag,
id: id,
css: css
}
return idAndCSS;
}
function setCSS(className,zIndex,width,height,backgroundColor,position,left,top,cursor,border){
var i;
var cssPart;
cssPart = document.getElementsByClassName(className);
document.getElementById("1").innerHTML = cssPart.length;
document.getElementById("2").innerHTML = cssPart[0];
document.getElementById("3").innerHTML = cssPart[1];
document.getElementById("4").innerHTML = cssPart[2];
for(i=0; i < cssPart.length; i++){
cssPart[i].style.zIndex = zIndex;
cssPart[i].style.width = width;
cssPart[i].style.height = height;
cssPart[i].style.backgroundColor = backgroundColor;
cssPart[i].style.position = position;
cssPart[i].style.left = left;
cssPart[i].style.top = top;
cssPart[i].style.cursor = cursor;
cssPart[i].style.border = border;
}
}
#buttonToOpenWindow{
width:50px;
height:20px;
border: 1px solid #DCDCDC;
margin: 2px;
position:fixed;
left:-1px;
top:0px;
}
#buttonToOpenWindow div.positionOfPlus{
width:20px;
height:20px;
position:absolute;
left:30px;
}
div.wrapOfPlus{
width:20px;
height:20px;
}
div.inside01{
width:15px;
height:5px;
background-color: #B0C4DE;
position:absolute;
left:2.5px;
top:7.5px;
}
div.inside02{
width:5px;
height:15px;
background-color: #B0C4DE;
position:absolute;
left:7.5px;
top:2.5px;
}
<section id="section0">
<div id="buttonToOpenWindow" onclick="openWindow()">
<div class="positionOfPlus">
<div class="wrapOfPlus">
<div class="inside01"></div>
<div class="inside02"></div>
</div>
</div>
</div>
</section>
<footer>
<br><br><br><br><br>
<div style="display:inline-flex;">00: <div id="0"></div></div><br>
<div style="display:inline-flex;">01: <div id="1"></div></div><br>
<div style="display:inline-flex;">02: <div id="2"></div></div><br>
<div style="display:inline-flex;">03: <div id="3"></div></div><br>
<div style="display:inline-flex;">04: <div id="4"></div></div><br>
<div style="display:inline-flex;">05: <div id="5"></div></div><br>
<div style="display:inline-flex;">06: <div id="6"></div></div><br>
<div style="display:inline-flex;">07: <div id="7"></div></div><br>
<div style="display:inline-flex;">08: <div id="8"></div></div><br>
<div style="display:inline-flex;">09: <div id="9"></div></div><br>
<div style="display:inline-flex;">10: <div id="10"></div></div><br>
<div style="display:inline-flex;">11: <div id="11"></div></div><br>
<div style="display:inline-flex;">12: <div id="12"></div></div><br>
<div style="display:inline-flex;">13: <div id="13"></div></div><br>
<div style="display:inline-flex;">14: <div id="14"></div></div><br>
<div style="display:inline-flex;">15: <div id="15"></div></div><br>
<div style="display:inline-flex;">16: <div id="16"></div></div><br>
<div style="display:inline-flex;">17: <div id="17"></div></div><br>
<div style="display:inline-flex;">18: <div id="18"></div></div><br>
<div style="display:inline-flex;">19: <div id="19"></div></div><br>
<div style="display:inline-flex;">20: <div id="20"></div></div><br>
<div style="display:inline-flex;">21: <div id="21"></div></div><br>
<div style="display:inline-flex;">22: <div id="22"></div></div><br>
<div style="display:inline-flex;">23: <div id="23"></div></div><br>
<div style="display:inline-flex;">24: <div id="24"></div></div><br>
<div style="display:inline-flex;">25: <div id="25"></div></div><br>
<div style="display:inline-flex;">26: <div id="26"></div></div><br>
<div style="display:inline-flex;">27: <div id="27"></div></div><br>
<div style="display:inline-flex;">28: <div id="28"></div></div><br>
<div style="display:inline-flex;">29: <div id="29"></div></div><br>
<div style="display:inline-flex;">30: <div id="30"></div></div><br>
<div style="display:inline-flex;">111: <div id="111"></div></div><br>
<div style="display:inline-flex;">222: <div id="222"></div></div><br>
<div style="display:inline-flex;">333: <div id="333"></div></div><br>
<div style="display:inline-flex;">444: <div id="444"></div></div><br>
<div style="display:inline-flex;">555: <div id="555"></div></div><br>
<div style="display:inline-flex;">666: <div id="666"></div></div><br>
<div style="display:inline-flex;">777: <div id="777"></div></div><br>
<div style="display:inline-flex;">888: <div id="888"></div></div><br>
<div style="display:inline-flex;">999: <div id="999"></div></div><br>
</footer>

Random card/Image using buttonjavascript

I want to create a card game using java script. Being a beginner at java script, I am finding great difficulty finding a suitable tutorial for what I am trying to do. When the 'start game' button is selected, I want the computer to produce a random card. I have tried many ways of doing this and have came to no avail. Here is my code.
<html>
<head>
<title> Christmas Assignment </title>
<link rel="stylesheet" type="text/css" href="xmasass_1.css">
<script type = "text/javascript">
function randomImg(){
var myimages= [];
myimages[1] = "cards/1.gif";
myimages[2] = "cards/2.gif";
myimages[3] = "cards/3.gif";
myimages[4] = "cards/4.gif";
myimages[5] = "cards/5.gif";
myimages[6] = "cards/6.gif";
myimages[7] = "cards/7.gif";
myimages[8] = "cards/8.gif";
myimages[9] = "cards/9.gif";
myimages[10] = "cards/10.gif";
myimages[11] = "cards/11.gif";
myimages[12] = "cards/12.gif";
myimages[13] = "cards/13.gif";
function oddTrivia(){
var randomImg = Math.floor(Math.random()*(oddtrivia.length));
document.getElementById('comp').InnerHTML=myimages[randomImg];
}
ar total = 0;
function randomImg(){
var x = Math.floor(Math.random()*13)+1;
document.getElementById('img1').src = 'die'+x+'.gif';
document.getElementById('img2').src = 'die'+y+'.gif';
document.getElementById('score').innerHTML = total;
}
var card1Image;
var card2Image;
var card3Image;
var card4Image;
var card5Image;
var card6Image;
function start(){
var button = document.getElementById("startButton");
button.addEventListener("click", pickCards, false);
card1Image = document.getElementById("1");
card2Image = document.getElementById("2");
card3Image = document.getElementById("3");
card4Image = document.getElementById("4");
card5Image = document.getElementById("5");
card6Image = document.getElementById("6");
}
function pickCards(){
setImage(card1Image);
setImage(card2Image);
setImage(card3Image);
setImage(card4Image);
setImage(card5Image);
setImage(card6Image);
}
function setImage(cardImg){
var cardValue = Math.floor(1 + Math.random() * 13);
cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");
}
window.addEventListener("load", start, false);
</script>
</head>
<body>
<div id = "settings">
<img src = "settings_img.png" width = "60" height = "60">
</div>
<div id = "bodydiv">
<h1> Card Game</h1>
<div id = "computer">
<img src = " cards/back.gif">
</div>
<div id = "comp" > Computer </div>
<div id ="arrow">
<img src ="arrow2.png" width = "100" height="100">
</div>
<div id = "player">
<img src = " cards/back.gif">
</div>
<div id = "play"> Player </div>
<div id = "kittens">
<button id = "startButton" onclick ="randomImg" > Start Game </button>
<div id = "buttons_1">
<button id ="higher"> Higher
</button>
<button id = "equal"> Equal
</button>
<button id = "lower"> Lower
</button>
</div>
<button id = "draw"> Draw your Card
</button>
<div id = "resetscore"> Reset Score
</div>
</div>
<div id = "score">
</div>
</div>
</body>
</html>
body {
background:#66ccff;
}
h1 {
text-align:center;
}
#settings {
float:right;
margin-top:10px;
}
#bodydiv {
width: 800px;
height:600px;
margin-left:200px;
margin-top:40px;
margin-bottom:60px;
background:#ffccff;
border-radius: 10px;
}
#computer {
border-radius: 10px;
position: absolute;
left:35%;
top:27%;
}
#player {
border-radius: 10px;
position: absolute;
left:55%;
top:27%;
}
#start_game {
width :120px;
height: 55px;
margin-left: 350px;
margin-top:50px;
background:white;
border:1px solid black;
}
#buttons_1 {
text-align: center;
margin-top:20px;
}
#higher {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#equal {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#lower {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#draw {
width:160px;
height:30px;
margin-left:325px;
margin-top: 30px;
border:1px solid black;
background:#FFFFCC;
}
#resetscore {
text-align: center;
margin-top: 40px;
}
#arrow {
margin-left:370px;
margin-top:-130px;
}
#comp {
margin-top:240px;
margin-left:265px;
}
#play{
margin-top:10px;
margin-left:540px;
}

You code is kind of hard to read.
You forgot to close the "{" of your main function.
You are declaring "randomImg" again in the body of the "randomImg" function(use a different name).
You wrote
ar total = 0;
I think you meant to write:
var total = 0;
oddtrivia in the function "OddTrivia" is not defined.
y in the inner randomImg function is not defined.

Having poked a little bit at the code, here is a few things:
Problem no 1: randomImg()
It's hard to know your intentions, but you should likely begin with removing the start of your first function randomImg(){.
Because 1) It does not have an end and 2) If it actually spans everything then this line window.addEventListener("load", start, false); will not load on startup (since it does not get executed until randomImg() gets executed, and by then the page has already loaded.)
Problem no 2: Cannot set property 'src' of null"
Now when the first problem is out of the way, you should see "Uncaught TypeError: Cannot set property 'src' of null" if you look in your console. Yes, USE YOUR CONSOLE. Click on the error to show what causes it. Here it is:
cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");
This means that cardImg is null. We backtrack the first call of setImage() and find that the variable card1Image is passed in. So that must mean that card1Image also is null. You can check it yourself by adding a console.log('card1Image', card1Image); in your code. Or you add a breakpoint at that point. (Use the sources-tab in chrome dev tools, click at the line-numbering to add a break point. Refresh the page and it will stop at the break point. Now you can mouse-over variables to see their values.)
Let's look at where 'card1Image' is set.
card1Image = document.getElementById("1");
So why is this returning null? Do we even have a id="1" element in the html? That could be the reason. (It is.)
There are more problems, but I'll stop there, but when you have fixed this part AND have no errors please ask again. Always check your errors and if you ask a question here you should provide errors. And when you can also be more specific with your questions.
What might someone else have done differently?
When it comes to playing cards, why not an array of objects?
var cards = [
{ src : 'cards/1.gif', value: 1 },
{ src : 'cards/2.gif', value: 2 },
{ src : 'cards/3.gif', value: 3 },
{ src : 'cards/4.gif', value: 4 }
]; // (You can of course use code to generate it.)
// Then a function to put cards in the player's hand.
var playerHand = _.sample(cards, 2);
console.log(playerHand);
Here I assume lodash, a lightweight library for when you don't want to re-invent the wheel.

How to change code so that pictures be in "main-block", instead of a js-code? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to change this javascript code - http://jsbin.com/ciduhegukinu/2/edit
How to change this code so that pictures be in "main-block", instead of a js-code. And then already to bring them in the slides array in javascript.
And that the structure of all the page was following:
I want:
------------------------
Big picture (100% width)
-----------------------
menu ||| galery
-----------------------
Instead of (I have now):
.................
galery (100 width 100 height)
................
I want (don't work):
var div = document.getElementById("main-block");
var images = div.getElementsByTagName("img");
var slides = Array.prototype.forEach.call(images,function (el) {
slides.push(el.getAttribute("src"));
});
Slider.init({
images : slides
})
Instead of (it is work):
Slider.init(document.body,{
images : [
"http://cdn.trinixy.ru/pics3/20080515/vodopadi_18.jpg",
"http://i.redigo.ru/4fb0dd2a4e202.jpg",
"http://4.bp.blogspot.com/-dN_zBi_BLio/Uli2RStTf2I/AAAAAAAAIH4/EpGnraB6qu8/s1600/%D0%BB%D0%B0%D0%B2%D0%BE%D1%87%D0%BA%D0%B02.jpg",
"http://www.uznayvse.ru/images/stories/uzn_1384119271.jpg",
"http://i.redigo.ru/4fb0dd2a4e202.jpg",
]
});
Also surely there has to be a scrolling down in the browser if the photo is much. In galleries has to be on 3 photos at line.
All my code:
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<center>
<div width="300px" id="content">
<img src="images/top.gif" width="100%" height="300px">
<table border="3px">
<tr>
<td>
<div id="menu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div id="menu_foto">
<li></li><br>
<li></li><br>
<li></li><br>
</div>
</div>
</ul>
</td>
<td>
<div id="main-block">
<img src="images/fotogalery/1.jpg">
<img src="images/fotogalery/2.jpg"><br>
<img src="images/fotogalery/3.jpg">
<img src="images/fotogalery/4.jpg"><br>
<img src="images/fotogalery/5.jpg">
<img src="images/fotogalery/6.jpg"><br>
<img src="images/fotogalery/7.jpg">
<img src="images/fotogalery/8.jpg"><br>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
<style>
html,body{
margin:0px;
}
#cap {
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:flex;
z-index : 99999;
position:fixed;
}
figure {
padding:0px;
margin:100px auto;
width:800px;
overflow: hidden;
}
img {
height: 450px;
width:550px;
border:5px solid white;
border-radius: 5px;
margin:auto;
}
ul {
width:810px;
list-style:none;
margin:0px;
padding:0px;
}
li {
width:810px;
position:absolute;
opacity:0;
text-align: center;
}
li:first-child{
opacity:1;
}
.previewSlide{
width:250px;
height:250px;
overflow: hidden;
float: left;
margin:10px;
}
</style>
<script>
var Slider = {
Collection : [],
currentSlide : 0,
Box : {
showBox : function (n) {
if(!this.element) return;
this.element.style.display = "flex";
document.body.style.overflow = "hidden";
var slides = this.element.getElementsByTagName("li");
slides.item(n).style.opacity = 1;
Slider.currentSlide = n;
},
closeBox : function (n) {
if(!this.element) return;
this.element.style.display = "none";
document.body.style.overflow = "auto";
var slides = this.element.getElementsByTagName("li");
Array.prototype.forEach.call(slides,function (el) {
el.style.opacity = 0;
})
}
},
Prevew : {
element : {},
init : function (p) {
var div = document.createElement("div");
div.id = "previewSlides";
div.style.position = "fixed";
for(var i in Slider.Collection) {
var figure = document.createElement("figure");
figure.setAttribute("class","previewSlide");
var img = document.createElement("img");
img.src = Slider.Collection[i];
img.onclick = (function (i) {
var i = i;
return function (e) {
Slider.Box.showBox(i);
}
})(i);
figure.appendChild(img);
div.appendChild(figure);
this.element = div;
}
p.appendChild(div)
}
}
}
Slider.init = function (p,options) {
var opt = options || {};
this.Collection = opt.images;
var self = this;
(function (p) {
var cap = document.createElement("div");
cap.id = "cap";
var figure = document.createElement("figure");
figure.id = "slideWrapper";
var ul = document.createElement("ul");
ul.setAttribute("class","slideList");
ul.style.left = 0;
for(var i = 0; i < self.Collection.length; i++) {
var li = document.createElement("li");
var img = document.createElement("img")
img.src = self.Collection[i];
li.appendChild(img);
ul.appendChild(li);
}
var img = document.createElement("img");
img.class = "slide";
img.src = self.Collection[0] || "";
p.appendChild(cap);
cap.appendChild(figure);
figure.appendChild(ul);
self.Box.element = cap;
self.Box.closeBox();
self.Prevew.init(p);
})(p);
}
Slider.changeSlide = function (dir) {
var slides = this.Box.element.getElementsByTagName("li");
var l = this.Collection.length;
slides.item(this.currentSlide).style.opacity = 0;
(dir) ? this.currentSlide ++ : this.currentSlide--;
if(this.currentSlide == l) this.currentSlide = 0;
if(this.currentSlide < 0) this.currentSlide = l-1;
slides.item(this.currentSlide).style.opacity = 1;
};
var div = document.getElementById("main-block");
var images = div.getElementsByTagName("img");
var slides = Array.prototype.forEach.call(images,function (el) {
slides.push(el.getAttribute("src"));
});
Slider.init(document.body,{
images : slides
});
Slider.Box.element.onclick = function (e) {
if(e.target.tagName != "IMG") Slider.Box.closeBox();
else {
if(e.clientX > (e.target.offsetWidth + e.target.style.width/2) ) Slider.changeSlide(false);
else Slider.changeSlide(true);
}
}
</script>

I can't write the whole page for you, so this is surely not a complete answer.
1) Start with the html you find here. It will give your page basically the structure you asked for. When you insert elements for your needs, dont forget to close them properly. 2) Forget the css you have posted, it has not much to do with your html. Write your own css for the elements you have and put it into style-tag in head. 3) Put your script into script-tag at bottom.
I hope this will help you to get the right direction.
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#menu {float: left; width: 30%}
#main-block {float: right; width: 70%}
#footer {clear: both;}
/* put your css here */
</style>
</head>
<body>
<div id="content">
<img src="images/top.gif" width="100%" height="300px">
<div id="menu">
<ul>
<li></li>
<li></li>
</ul>
<div id="menu_foto">
<ul>
<li></li><br>
<li></li><br>
<li></li><br>
</ul>
</div>
</div>
<div id="main-block">
<img src="images/fotogalery/1.jpg">
<img src="images/fotogalery/2.jpg"><br>
<img src="images/fotogalery/3.jpg">
<img src="images/fotogalery/4.jpg"><br>
<img src="images/fotogalery/5.jpg">
<img src="images/fotogalery/6.jpg"><br>
<img src="images/fotogalery/7.jpg">
<img src="images/fotogalery/8.jpg"><br>
</div>
</div>
<div id="footer">
<p> Put in here what you want to have in footer</p>
</div>
</body>
<script>
/* put your javascript here */
</script>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Printing pictures from JavaScript - javascript

Related

How can I update attributes with jQuery?

How to dynamically create table in html with certain constraints?

Could help me to resolve mouse events?

Random card/Image using buttonjavascript

How to change code so that pictures be in "main-block", instead of a js-code? [closed]

Categories

Resources