We Keep Coding

display image on click on a canvas

I am trying to get thing ping button function to work where it displays an image of an exclamation mark. However I am struggling to get it to activate within the toolbar so I am not sure if the code works at all. This is essentially the toolbar code in the HTML file and I added my own ping button there.
<div class="toolbar">
<span class="color" data-color="#D00000" data-width="20"></span>
<span id="ping" data-color="#ff000020" data-width="20">
<img src="/images/ping.png" height="20" width="20"/>
</span>
This is the toolbar code for the color and it's functional.
Drawing.ColorButtonToolbar = function(whiteboard, buttons) {
this.buttons = buttons;
this.whiteboard = whiteboard;
this.addEventListeners();
this.renderBackground();
};
Drawing.ColorButtonToolbar.prototype.addEventListeners = function() {
this.buttons
.on("click", this.onActivate.bind(this))
.on("touchstart", this.onActivate.bind(this))
;
};
Drawing.ColorButtonToolbar.prototype.onActivate = function(event) {
var button = $(event.target);
this.buttons.removeClass("active");
button.addClass("active");
this.whiteboard.lineColor = button.data("color");
this.whiteboard.lineWidth = button.data("width");
};
Drawing.ColorButtonToolbar.prototype.renderBackground = function() {
this.buttons.each(function(){
$(this).css({
background: $(this).data("color")
});
});
};
Using the toolbar code as reference,
Drawing.PingButton = function(whiteboard, button) {
this.button = button;
this.whiteboard = whiteboard;
this.addEventListeners();
};
Drawing.PingButton.prototype.addEventListeners = function() {
this.button
.on("click", this.onActivate.bind(this))
.on("touchstart", this.onActivate.bind(this))
};
Drawing.PingButton.prototype.onActivate = function (event) {
var button = $(event.target);
this.buttons.removeClass("active");
button.addClass("active");
this.whiteboard.onClick = ping();
};
Drawing.PingButton.prototype.ping = function () {
var x = event.clientX;
var y = event.clientY;
var pingImg = document.getElementById("ping");
pingImg.style.display = '';
pingImg.style.position = 'absolute';
pingImg.style.left = x + 'px';
pingImg.style.top = y + 'px';
};
However I cannot get the ping tool to activate. Nothing happens when I click on it. I am aware the syntax is old but this is a group project and this is what we have.

changing a Javascript image on event listener click

i have a Div holding an image with the id sunset that i want to add an onclick to to change its width from the CSS 25% to 100%
cannot see why my code is not working
var content = document.getElementById("sunset");
var first_click = true;
content.addEventListener("click", function () {
if (first_click) {
content.style.width = "100%";
}
else {
content.style.width = "25%";
}
});
CSS
#sunset{
width:25%
}

The first if statement doesn't check if the first_click var is true (assuming that is what you intend to do). Since it is empty it would return false and the else statement would run, keeping your image at 25%.
try this:
var content = document.getElementById("sunset");
var first_click = true;
content.addEventListener("click", function () {
if (first_click == true) {
content.style.width = "100%";
}
else {
content.style.width = "25%";
}
});

Have you tried adding height to your container ? This should work
var content = document.getElementById("sunset");
var first_click = true;
content.addEventListener("click", function () {
if (first_click) {
content.style.width = "100%";
first_click = false;
}
else {
content.style.width = "25%";
}
});
#sunset{
width:25%;
background: #000;
height: 200px;
}
<div id="sunset"></div>

The problem is that you're not toggling the first_click variable to true or false when the image is clicked. The code below fixes this by setting first_click = !first_click:
var content = document.getElementById("sunset");
var first_click = true;
content.addEventListener("click", function() {
if (first_click) {
content.style.width = "100%";
} else {
content.style.width = "25%";
}
first_click = !first_click;
});
#sunset {
width: 25%
}
<img id="sunset" src="https://dummyimage.com/150/f8f">

Function not running after submitting name into prompt

entering correct student name associated with image within prompt but it is not running the "checkAnswer" function
this is the function
function checkAnswer() {
if (document.getElementById('response').value == personArray[currentId].firstname) {
//NOTE TO STUDENT: apply the class to reduce the opacity of the image,
//takeout the mouse events because they shouldn't be there anymore
document.getElementById(currentId).className = "opClass";
document.getElementById(currentId).removeAttribute("onclick");
document.getElementById(currentId).removeAttribute("onmouseover");
//superimpose name on image
var divVar = document.createElement('div');
divVar.setAttribute('id', currentId + 'name');
document.getElementById('pic-grid').appendChild(divVar);
var textNode = document.createTextNode(personArray[currentId].firstname);
divVar.appendChild(textNode);
document.getElementById(currentId + 'name').style.position = "absolute";
document.getElementById(currentId + 'name').style.top = y;
document.getElementById(currentId + 'name').style.left = x;
//clean up loose ends: hide the prompt, turn the frame white so it doesn't change to aqua on the rollover, erase the response and message
document.getElementById('prompt').style.display = 'none';
document.getElementById(currentId).parentNode.style.backgroundColor = 'white';
document.getElementById('response').value = "";
document.getElementById('message').innerHTML = "";
} else {
if (document.getElementById('message').innerHTML == "Wrong!") {
document.getElementById('message').innerHTML = "Incorrect answer!"
} else {
document.getElementById('message').innerHTML = "Wrong!"
}
}
return false;
}
Basically if the user enters the correct name in the prompt that is associated with the image they selected, the image should fade (opacity) and display the name of the student in the image (style position, top, & left) or if they enter the wrong name they are told within the prompt that they are wrong or incorrect.
As soon as I enter the correct student name, the prompt disappears and nothing happens or if I do the wrong name, it disappears as well.
here is the populateImages function that i forgot to place in here, sorry.
function populateImages() {
for (var i = 0; i < personArray.length; i++) {
var imageContainer = document.createElement("div");
var image = document.createElement("img");
imageContainer.classList.add('frame');
image.src = personArray[i].url;
image.setAttribute('onclick','promptForName(this)');
image.setAttribute('onmouseover','styleIt(this)');
image.setAttribute('onmouseout','unStyleIt(this)');
imageContainer.appendChild(image);
document.getElementById('pic-grid').appendChild(imageContainer);
}
}
Here's my HTML:
<body onload="populateImages()">
<header>
<h2>Class Flashcards</h2>
<h3>Click on a student to guess their name</h3>
<h4>Concepts: Rollovers, Opacity, Showing and Hiding Elements, Arrays of Objects, Adding and Removing Elements/Attributes Dynamically to the DOM,
Accessing Elements using parentnode</h4>
</header>
<div id="pic-grid">
</div>
<div id="prompt">
What is this student's name?<br>
<form onsubmit="return checkAnswer()">
<input type="text" id="response" name="quizInput">
</form>
<div id="message"></div>
</div>
</body>
the form is being submitted through this function and shows up when image is selected:
function promptForName(element) {
document.getElementById('response').value = "";
document.getElementById('message').innerHTML = "";
document.getElementById('prompt').style.display = 'block';
currentId = element.id;
x = element.offsetLeft;
y = element.offsetTop;
x = x + 20;
y = y + 20;
document.getElementById('prompt').style.position = "absolute";
document.getElementById('prompt').style.top = y;
document.getElementById('prompt').style.left = x;
document.getElementById('response').focus();
}

return false cancels submit action. you must insert a return true if everything is ok
try this function
function checkAnswer() {
if (document.getElementById('response').value == personArray[currentId].firstname) {
//NOTE TO STUDENT: apply the class to reduce the opacity of the image,
//takeout the mouse events because they shouldn't be there anymore
document.getElementById(currentId).className = "opClass";
document.getElementById(currentId).removeAttribute("onclick");
document.getElementById(currentId).removeAttribute("onmouseover");
//superimpose name on image
var divVar = document.createElement('div');
divVar.setAttribute('id', currentId + 'name');
document.getElementById('pic-grid').appendChild(divVar);
var textNode = document.createTextNode(personArray[currentId].firstname);
divVar.appendChild(textNode);
document.getElementById(currentId + 'name').style.position = "absolute";
document.getElementById(currentId + 'name').style.top = y;
document.getElementById(currentId + 'name').style.left = x;
//clean up loose ends: hide the prompt, turn the frame white so it doesn't change to aqua on the rollover, erase the response and message
document.getElementById('prompt').style.display = 'none';
document.getElementById(currentId).parentNode.style.backgroundColor = 'white';
document.getElementById('response').value = "";
document.getElementById('message').innerHTML = "";
return true; // return true if everything is ok
} else {
if (document.getElementById('message').innerHTML == "Wrong!") {
document.getElementById('message').innerHTML = "Incorrect answer!"
} else {
document.getElementById('message').innerHTML = "Wrong!"
}
return false; // return false if error
}
}

I can't remove a child in javascript that is pretty much identical to another child that i can remove

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box">
<button id="start" type="button" onclick="myStart()" > Start</button>
<script>
function myStart() {
document.getElementById("start").style.display="none";
var rosso = casuale(0,1);
if (rosso==0) {
var imgtest1= document.createElement("input");
imgtest1.src="http://www.w3schools.com/tags/logo_w3s.gif";
imgtest1.type="image";
imgtest1.style.height="50px";
imgtest1.style.width="50px";
imgtest1.style.position="absolute";
imgtest1.style.top="300px";
imgtest1.style.left="0px";
imgtest1.onclick= function() { document.getElementById("box").removeChild(imgtest1)
}
document.getElementById("box").appendChild(imgtest1);
}
else {
var imgtest1= document.createElement("input");
imgtest1.src="https://s3.amazonaws.com/impressivewebs/2014-02/w3schools-logo.jpg";
imgtest1.type="image";
imgtest1.style.height="50px";
imgtest1.style.width="50px";
imgtest1.style.position="absolute";
imgtest1.style.top="300px";
imgtest1.style.left="0px";
imgtest1.onclick= function() { document.getElementById("box").removeChild(imgtest1)}
document.getElementById("box").appendChild(imgtest1);
}
}
function casuale(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</div>
</body>
I have a little problem with this code:
var rosso = casuale(0, 3)
if (rosso == 0) {
var imgtest1 = document.createElement("input");
imgtest1.src = "graphic/badtarget.png";
imgtest1.type = "image";
imgtest1.style.height = "50px";
imgtest1.style.width = "50px";
imgtest1.style.position = "absolute";
imgtest1.style.top = "300px";
imgtest1.style.left = "0px";
imgtest1.onclick = function() {
error++;
checkerror();
}
document.getElementById("box").appendChild(imgtest1);
} else {
var imgtest1 = document.createElement("input");
imgtest1.src = "graphic/goodtarget.png";
imgtest1.type = "image";
imgtest1.style.height = "50px";
imgtest1.style.width = "50px";
imgtest1.style.position = "absolute";
imgtest1.style.top = "300px";
imgtest1.style.left = "0px";
imgtest1.onclick = function() {
point++;
document.getElementById("box").removeChild(imgtest1);
if (point == maxp) {
livello2(7);
cleartarget();
}
}
document.getElementById("box").appendChild(imgtest1);
}
wheni try to remove the child "imgtest1" with the goodtarget.png image i have no problems, instead when i want to remove the child with the badtarget.png image the button stay here and there is no way to remove it. Why this happens? there is a way to solve this? if needed i can post other lines of code.
Thanks
Edit: Sorry for wasting your time, in the snippet the code works as intended (both the green and the blue images can disappear) but in my program can not.
the lines of code that i use for the remove child is a function that should be called at the end of a level:
var myNode = document.getElementById("box");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
this function cant remove the objects created with the "imgtest1.src = "graphic/badtarget.png";"
Thanks for your time

close icon doesn't appear

I was trying to add a text popup box on my page, and this code helped me but I need to add a close icon (which is an image in my code)..
but it doesn't work :/
here is my code:
function show_hide_box(an, width, height, borderStyle) {
if (navigator.userAgent.indexOf("MSIE") != -1) {
var browserIsIE = true;
} else { browserIsIE = false; }
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#FFF';
var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'Close');
inClosebox.style.position = 'absolute';
if (browserIsIE) {
inClosebox.style.left = '-1px';
inClosebox.style.top = '0px';
} else {
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
}
inClosebox.style.visibility = 'hidden';
var inImage2 = document.createElement("img");
inImage2.onclick = function () { this.document.close(); };
inImage2.setAttribute('src', '../../Images/closebox.png');
inImage2.setAttribute('width', '30');
inImage2.setAttribute('height', '30');
inImage2.setAttribute('border', '0');
inImage2.style.cursor = 'pointer';
inClosebox.appendChild(inImage2);
var contents = document.createElement('iframe');
contents.scrolling = 'yes';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
boxdiv.appendChild(inClosebox);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
return false;
}
can any help me please?

That should mean that the path of src is wrong. ie, ../../Images/closebox.png
Add this to your code and see whether this works
inImage2.setAttribute('alt', 'Close');
Even if this doesn't work, it shows you that something else is wrong with the code.
Its a very good practice to add alt attribute to img tag always.
Update:
I just saw this inClosebox.style.visibility = 'hidden';
You are appending img to that and so how are you gonna possibly make it visible when the parent is hidden?
Beats me. Or do you have extra code? If no, please remove that line and try.