Why are the images not coming up for document.createElement - javascript

I am a very novice coder and I am creating a game that calculates the area of a given rectangle however once the page loads, the image does not show and thus the user cannot answer the question.
An example image has been copied below
The "score" does not display either. Any help would be greatly appreciated :)
var number1;
var number2;
var response;
var calcanswer;
var score = 0;
window.onload = areaquestion1;
myScore.text = "SCORE: " + score;
function areaquestion1() {
var question = document.createElement("question");
question.setAttribute("src", "Images/2*1.png");
question.setAttribute("width", "304");
question.setAttribute("height", "228");
question.setAttribute("alt", "2*1");
document.body.appendChild(question);
var number1 = 2
var number2 = 1
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
check();
areaquestion2();
}
function areaquestion2() {
var question = document.createElement("question");
question.setAttribute("src", "Images/3*2.png");
question.setAttribute("width", "304");
question.setAttribute("height", "228");
question.setAttribute("alt", "3*2");
document.body.appendChild(question);
var number1 = 3
var number2 = 2
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
check();
areaquestion3();
}
function check()
{
var statusDiv = document.getElementById("status");
response=document.getElementById("answer").value;
if(response != calcanswer)
statusDiv.innerHTML="Incorrect";
else
if (response==calcanswer)
{
statusDiv.innerHTML="Very good!";
score ++;
document.getElementById("score").textContent = score
document.getElementById("answer").value = "";
problem();
}
}
<!DOCTYPE html>
<html>
<title>Lego Area</title>
<head>
<link rel="stylesheet" href="CSS/Play.css">
<script src="JavaScript/Play.js"></script>
</head>
<body onload="areaquestion1();">
<div class="header">
<h1>LEGO AREA</h1>
<p>Calculating <b>area</b> with Emmet.</p>
<div id="score" class="score" value="SCORE:"></div>
</div>
<form>
<div class="row">
<div class="side">
<div id="question"></div>
<div id ="prompt"></div>
<input type="text" id="answer"/>
</div>
<div class="main">
<input id="solve" type="button" value="CHECK!" onclick="check()" />
</div>
</div>
</form>
<div id="status"></div>
<!-- Footer -->
<div class="footer">
<div class="practice"> <img src="Images/legoBlue2.png" id="practicebtn" width="20%"></div>
<div class="play"> <img src="Images/legored2.png" id="playbtn" width="20%"></div>
</div>
</body>
</html>

This is my first question I'm attempting to answer -- so pretty big deal. Anyway...
A few things I noticed:
I got pretty confused reading the code seeing the question variable being used so much for different parts of the code. So I changed the var question to var imageBlock to make it more readable for me.
You were running the areaquestion1() function onload. Since the check() function was run as a part of the areaquestion1() function it was being run as well, in-turn displaying 'Incorrect' even before an answer was entered. I changed this to document.getElementById("solve").check(); to ensure it runs only after the CHECK! button was clicked.
Finally getting to your actual question. It looks like you are trying to use document.createElement to create an image with an id of question, however based on geeks for geeks and W3 Schools you use the document.createElement to create the img element. THEN you can set the id attribute to whatever you like. In this case, I switched it to imageBlock.setAttribute("id", "madeUpImg"); to help with my readability.
So this is what I did, I think there are a lot of improvements you can make, but this works and it will give you a good start:
function areaquestion1() {
var imageBlock = document.createElement("IMG");
imageBlock.setAttribute("id", "madeUpImg");
imageBlock.setAttribute("src", "guWFE.png");
imageBlock.setAttribute("width", "304");
imageBlock.setAttribute("height", "228");
imageBlock.setAttribute("alt", "2*1");
document.body.appendChild(imageBlock); // this appends it to the bottom of the page
number1 = 2
number2 = 1
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
document.getElementById("solve").check();
// areaquestion2(); }
All of this is edited to address your further questions:
For appending it in the appropriate spot: I haven't had time to jump back in my code, but this is what I'm thinking. Currently, when you read your code you have document.body.appendChild(question); This JavaScript is telling the computer to find the document, then find the body of that document, then run the appendChild function. So, basically it is saying - "computer, append the question variable to the body of the document". So, what's wrong with this? Well, you want to append it to a specific div! So, you're extremely close, but you're not grabbing the question div! You need to use code to tell the computer to find the question div, then append the image to that div. I'd do something like this: document.getElementById('question').appendChild(imageBlock) this now means the code is grabbing onto the div that you want to append it to then, appending the imageBlock to that div.
I commented out that areaquestion2 because I know you're going to run into more problems. 1. If you call the areaquestion2in the areaquestion1 function it will run immediately when the website loads (you're calling the area question1 on load). I think this is going to make both images appear at the same time. Why? It is just being instructed to append another image to the question div. 2. You probably don't want both images appearing at the same time. So, you're going to need to find a way to replace the first image rather then trying to add another one.
That's about all I can help you with on this for now. I think that if you continue to work through this then refactor it, you're going to learn a ton. I think you should try to bring this to one function by assigning questions to variables, then passing those variables in as arguments to your function. If you haven't already, I'd highly recommend going through FreeCodeCamp's stuff lesson by lesson.
Hope this helped!!

Related

FOR cycle just including closure still displays only the last picture

Good evening,
I have many articles on my web (my own do-it-yourself manuals how to create...) interspersed with pictures (it is written in Czech language). These pictures are small and I want using onclick in html to display them bigger always close to those small. I.e. each bigger picture is to be displayed beside his small one. This is a practical illustration:
http://mix.zlatberry.cz/obrazky1.html (clicking on the big picture - unintentionally at the end of site - it is shut down).
But, clicking any small picture only the last big picture is displayed!
Currently I know that only so called closure is remedy for my problem but despite this trick I am not able to force my iteration to show the first big picture beside the first small one, the second big picture beside the second small one and so on and so on.
HTML (is not from my head). Btw, please, is it posible to write this code - small picture versus big picture - easier way??
let obr = new Array('velka-fotka1', 'velka-fotka2', 'velka-fotka3', 'velka-fotka4', 'velka-fotka5');
for (let i = 0; i < obr.length; i++) {
(function() {
let x = i;
let fotka = document.getElementById(obr[x]);
function ZobrazFotku() {
fotka.style.display = 'block';
}
document.write(x); //document.write(x) writes numbers 01234
function SchovatFotku(div) {
document.getElementById(div).style.display = 'none';
}
})();
}
<div id='velka-fotka1'>
<div class="foto">
<a href='#' onclick="SchovatFotku('velka-fotka1'); return false" title='Shut down'></a>
<img src='bigmotopelech1.jpg' alt='click for display small picture' onclick="SchovatFotku('velka-fotka1'); return false" />
</div>
</div>
<div class="foto">
<a onclick="ZobrazFotku('bigmotopelech1.jpg'); return false" href='bigmotopelech1.jpg' title='display the big picture'><img src='motopelech1.jpg' width="320" height="240" alt="Pneumatika z motorky a deka"></a>
</div>
Testing my closure I tried to add document.write(x) but numbers are listed TOGETHER, not one after another by clicking small pictures, and all big pictures are displayed, to make thing worse, in a separate window of browser:
http://mix.zlatberry.cz/obrazky2.html
So I am really at the end of my tether :-( . I try to solve it since September.
I will be very appreciative for help leading to solving my problem. I enjoy to modify all my websites this way and I am in the doldrums...
Many thanks in advance <3
HTML:
<div id='big-photo1'>
<div class="foto">
<a href='#' onclick="HidePhoto('big-photo1'); return false" title='Hide'></a>
<img src='bigmotopelech1.jpg' alt='click for display a small photo' onclick="HidePhoto('big-photo1'); return false" />
</div>
</div>
<div class="foto">
<a onclick="DisplayPhoto('bigmotopelech1.jpg'); return false" href='bigmotopelech1.jpg' title='display a big photo'><img src='motopelech1.jpg' width="320" height="240" alt="Pneumatika z motorky a deka"></a>
</div>
Javascript:
let picture = new Array('big-photo1', 'big-photo2', 'big-photo3', 'big-photo4', 'big-photo5');
for (let i = 0; i < picture.length; i++) {
(function() {
let x = i;
let photo = document.getElementById(picture[x]);
function DisplayPhoto() {
photo.style.display = 'block';
}
function HidePhoto(div){
document.getElementById(div).style.display='none';
}
})();
}
Here is link with English variables etc. http://mix.zlatberry.cz/pict1.html
Change your ZobrazFotku function to accept the id of the div in which the img is contained as the first argument. This way you don't need the for loop at all.
function ZobrazFotku(id) {
var div = document.getElementById(id);
div.style.display = 'block';
}
function SchovatFotku(div) {
document.getElementById(div).style.display = 'none';
}
JSFiddle Demo: http://jsfiddle.net/rkaqzx2v/

is it possible to add 3 photos to this 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 6 years ago.
Improve this question
for this task i have to get 3 photos and make a button to cycle through the photos new i need to make it so that i can use photos from my file
.Every little helps :D
<!DOCTYPE html>
<html>
<body>
<img id="light" src="Red.png">
<script>
var list= ['Green.png', 'Yellow.png', 'Red.png'];
var i = 0;
function lightsCycle() {
i = i + 1;
i = i % list.length;
var light = document.getElementById("light").src = list[i];
}
</script>
<button type = "button" onclick="lightsCycle()">Next Light</button>
</body>
</html>
UPDATE: I have modified my code to attempt one of the answers given here, but I am still having trouble:
<!DOCTYPE html>
<html>
<body>
<img id="light" src="Red.png">
<script>
var list= ['https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png',
'https://img.clipartfox.com/837fed127e3383c2a61cf08f76a65081_pics-for-stop-light-yellow-clipart-traffic-light-yellow_641-880.png',
'http://previews.123rf.com/images/blojfo/blojfo1003/blojfo100300021/6559248-Traffic-light-with-red-light-Stock-Photo.jpg'];
var i = 0;
function lightsCycle() {
i = (i < list.length - 1) ? ++i : 0;
document.getElementById("light").src = list[i];
}
</script>
<img id="light" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png">
<button type = "button" onclick="lightsCycle()">Next Light</button>
</body>
</html>
In your function, you are incrementing i and then immediately throwing that value away on the next line where you are setting i to the modulo of i and the length of your array. That line is not needed.
You also need to check to see if i is at the highest index number that the array supports and, if so, reset it to 0.
Next, the line:
var light = document.getElementById("light").src = list[i];
unnecessarily declares a variable called light since you never use it anywhere.
Lastly, don't use HTML attributes to hook up event handlers (onclick, onmouseover, etc.) as they:
create spaghetti code (HTML and JavaScript mixed on the same line) that is difficult to read and maintain.
create globally scoped wrapper functions around your attribute's value that alter the this binding and can cause your function to not work correctly.
don't follow W3C standards for event handling.
// Put the correct relative paths to your images back into the array. Here, I'm substituting
// online images so that you can see the code working properly.
var list= ['https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png',
'https://img.clipartfox.com/837fed127e3383c2a61cf08f76a65081_pics-for-stop-light-yellow-clipart-traffic-light-yellow_641-880.png',
'http://previews.123rf.com/images/blojfo/blojfo1003/blojfo100300021/6559248-Traffic-light-with-red-light-Stock-Photo.jpg'];
var i = 0;
// Only scan the document one time to get a reference to the image element.
// It's a waste of resources to do it every time the button is clicked
var img = document.getElementById("light");
var btn = document.getElementById("btn")
// Don't use HTML attributes to hook up event handlers (onclick, onmouseover, etc.)
btn.addEventListener("click", lightsCycle);
function lightsCycle() {
// If i is less than the max index, increment it, otherwise set it to zero
i = (i < list.length - 1) ? ++i : 0;
// Set the source of the image element to the next array value
img.src = list[i];
}
img { width:50px; }
<img id="light" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png">
<button type="button" id="btn">Next Light</button>

Appending Button not working

function story1(){
var t=document.createElement('p');
t.innerHTML = "You wake up from your sleep in a half daze to hear noises of screams outside your bedroom window. You stumble over there to see what is the matter. You decide it's a good idea to grab your"+' <i onclick=addSword()> '+" sword "+' </i> '+"as you take the "+' <i onclick=story2()> '+" stairs. "+'</i>';
document.getElementById("story").appendChild(t);
}
function story2(){
var t = document.createElement('p');
t.innerHTML = "You realize that the door is locked and need to break the code in order to go outside." +' <i id="one" onclick=addOne()> '+ num1 +'</i>'+' <i id="two" onclick=addTwo()> '+ num2+'</i>'+' <i id="three" onclick=addThree()> '+ num3 +'</i>';
document.getElementById("story").appendChild(t);
var b = document.createElement('input');
b.type = 'button';
b.value = 'Check Code';
b.onclick = checkCode();
document.getElementById("story").appendChild(b);
}
In short these two functions are where my issue lies. I'm trying to append a button inside of a div to check to see if the code is broken. The coding for checkCode is working as is.
The issue is, that checkCode() is actually working when stairs in clicked instead of the button. I've tried b.on('click', checkCode()) and b.setAttribute('onclick', checkCode()).
Maybe I'm not coding the button right, but tutorials and reading answers to similar problems can only get me so far! (lol)
Thanks in advance!
Your issue is that you are setting the result of the function checkCode to the handler/attribute in stead of the function reference. You are invoking it.
Try:
b.onclick = checkCode;
or
b.on('click', checkCode);
You need to set the reference of the function to the handler. setting it with () will invoke the function then and there and hence you see the behavior.

How to make a div's background color randomly change when the page refreshes

this is my first question here so excuse me if I did anything wrong.
I'm doing the layout of a website and I want the header to change colors randomly when the user refresh the page. I already did some research and got these javascript codes:
<script type="text/javascript">
var randnum = Math.random();
var inum = 2;
var rand1 = Math.round(randnum * (inum-1)) + 1;
var colors = new Array;
colors[1] = "#385c78";
colors[2] ="#9d302f";
var color = colors[rand1]
document.getElementById('navbar').style.backgroundColor = image;
</script>
This one goes inside the head tag. It picks a random hexadecimal code between the two ones I want and store it on the var color.
The second one I'm using goes on the body.
<script type="text/javascript">
//writes "<div id="header" style="background-color:#something">"
document.write('<div id="header" style="background-color:' + color + '">')
</script>
<!-- continuation of div id="navbar" -->
*Header code here*
</div>
The problem is that this way of doing it is giving me some troubles, since the div id="header" is written inside javascript. I can't wrap other divs properly and Google Chrome's inspect element tells me that the body size is 1333px x 80px (as it can be seen here http://puu.sh/2yjKi), exactly and only the header size, and it doesn't wraps the rest of the website content.
So my question is: Is there any way to improve that code? Make the background color of that div change via javascript or something like that?
I thank you all in advance for reading and appreciate your help.
Though the post is little old but my answer may help others who would land here just like me!!
DEMO
HTML:
<div style="height:150px">
<div>
<h1><center>That's how i change color!!</center></h1>
</div>
<br><br>
<div class="bordered" id="fancy">
<center>I behave like a chameleon!!</center>
</div>
</div>
JS:
setInterval(function () {
document.getElementById("fancy").style.background= '#'+Math.floor(Math.random()*16777215).toString(16);
document.body.style.background= '#'+Math.floor(Math.random()*16777215).toString(16);
}, 1000);
Hope this would help someone!!
Output your header as normal HTML, and then use JavaScript to update the color onDomReady. Something about like this:
$(document).ready(function() {
var colors = ["#385c78", "#9d302f"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#header");
header.css("background-color", selectedColor);
});
http://jsfiddle.net/ryanbrill/GD3qB/
function changecolor() {
var colors = ["#B40404", "#0000FF", "#FE2E9A", "#FF0080", "#2EFE2E", ];
var rand = Math.floor(Math.random() * colors.length);
$('#controls-wrapper').css("background-color", colors[rand]);
setTimeout('changecolor()', 1000);
}

how to make the following code faster?

I am developing a application with phonegap. on my pc everything runs fine but on my mobile device its just too slow.
i think the problem is on the show function, the android browser seems to needs really long to hide and show elements
what can be improved?
function show(id){
$('.view').hide()
//alert('show ' + id)
$('#'+id+'View').show()
scroll(0,0)
}
function getSoundHTML(id, myname, del){
if (del != true){
var imgsrc = 'plus.png'
var f = function(){
addToCostumSounds(id)
alert('added to favorites')
}
}else{
var imgsrc = 'minus.png'
var f = function(){
removeFromCostumSounds(id);
$(this).fadeOut().next('div').fadeOut();
}
}
var div = $('<div></div>').addClass('box').html(myname).css('border-color', '999999').click(function(){
play(id)
})
var img = $('<img></img>').attr('src', imgsrc).addClass('sideimg').click(f)
return $('<div></div>').append(img).append(div)
}
for(var category in categories){
var f = function(category){
$('#'+category+'Btn').click(function(){
show(category)
var categoryView = $('#'+category+'View')
for(var key in categories[category]){
var div = getSoundHTML(key, categories[category][key])
categoryView.prepend(div)
}
var img = '<img src="menu.png" class="menuimg"/>'
categoryView.prepend(img)
categoryView.append(img)
})
}
f(category)
}
the html:
<div class="btn" id="noBtn">no _</div>
<div class="btn" id="thatIsBtn">that is _</div>
<div class="btn" id="thereIsBtn">there is _</div>
<div class="btn" id="thisIsBtn">this is _</div>
...
<div class="view" id="noView"></div>
<div class="view" id="thatIsView"></div>
<div class="view" id="thereIsView"></div>
<div class="view" id="thisIsView"></div>
...
Whilst it may not have an effect on Desktops, your massive lack of semi-colons in the right places may have an effect on mobile devices.
The JavaScript engine has to run through and try to work out where the semi-colons need to go. See this transcript from the ECMAScript specification.
To be honest I think thats only a few milliseconds of time-saved, but its a starting point for now - and good practice for the future.
Here's your problem:
for(var category in categories){
var f = function(category){
...
for(var key in categories[category])
...
}
f(category)
}
You have two BIG issues here:
You're defining a function within a loop. While this is sometimes needed, you should do your very best to avoid defining things within a loop unless you absolutely need to. In this case, you could probably move the f function out of the loop entirely without breaking your code.
Nested loops. You have a for ... in within a for ... in loop. This is largely due to the first problem I pointed out, but in general nested loops are a big no-no from a performance standpoint.
ok, i think i got the only way to improve the peroformance:
if someone clicks on a button (class="btn") he is redirected to a new fresh page that has the entire page in HTML and does not build it with javascript.

Categories