image disappears after click on javascript - javascript

I can't figure out why my image goes away after I click.
var GOT = function() {
document.getElementById("sigil").onclick = function sigilchoice() {
var name = prompt("who goes there! what is our house name?");
document.getElementById("message").innerHTML = name;
return('message');
};
};
GOT();
html:
<h1>Choose a King</h1>
<a href="">
<img id="sigil" src="http://i.imgur.com/sUnMg32.jpg">
</a>
<p id="message"></p>
http://jsfiddle.net/RznH4/

I copied and pasted your code into a JSFiddle, but just removed the <a> tag, and it seems to work fine without it, with the <a href=""> it just reloads the page because the href is set to: href=""
HTML:
<h1>Choose a King</h1>
<img id="sigil" src="http://i.imgur.com/sUnMg32.jpg">
<p id="message"></p>
JavaScript:
document.getElementById("sigil").onclick = function sigilchoice() {
var name = prompt("who goes there! what is our house name?");
document.getElementById("message").innerHTML = name;
return('message');
};
(As you can see same exact code except HTML)
JSFiddle

Related

how to create button displays image file

I'm working on a webpage and I'm still learning HTML/CSS/Javascript. I'm trying to create a button such that it displays a random image file from my computer or database, but I'm not sure how to go about writing it. Here's my code:
function display() {
var popup = document.getElementById("img").src = "img_1.jpg";
}
<button class="popup" onclick="display()">ITERATION.
<span class="popupimg" id="img">img_1.jpg</span>
</button>
This, should be an img tag :)
<span class="popupimg" id="img">img_1.jpg</span>
like that:
<img src="img_1.jpg" id="img" />
Also, it doesnt have to be inside the button.
Your code should look something like
<button class="popup" onclick="display()">ITERATION.</button>
<img src="img_1.jpg" id="img" />
You can do something like following. But you should checkout jQuery too.
function display(imagepath) {
var img = document.getElementById("img");
img.src = imagepath;
img.style.display = 'block';
}
<img src='' style='display:none' id='img' width='120'>
<button class="popup" onclick="display('https://i.imgur.com/avAMfAu.jpg')">Show Image</button>
See example on jsfiddle
You need to use an <img>instead of a <span> if you want to display a image.
function display() {
var popup = document.getElementById("img").src = "img_1.jpg";
}
<button class="popup" onclick="display()"><!-- What is this ? => ITERATION. -->
<img id="img" src="">
</button>

Alert After All Elements Have Loaded

I have a quiz, and if you get 100%, when you load the last page, it will alert "You got 100%!". Although, it loads in before the background loads in. This is my code:
var chanceoflive1 = parseInt(localStorage.getItem("chanceoflive1"));
var chanceoflive2 = parseInt(localStorage.getItem("chanceoflive2"));
var chanceoflive3 = parseInt(localStorage.getItem("chanceoflive3"));
var chanceoflive4 = parseInt(localStorage.getItem("chanceoflive4"));
var chanceoflive7 = parseInt(localStorage.getItem("chanceoflive7"));
var chanceoflivefinal = (chanceoflive1||0) + (chanceoflive2||0) + (chanceoflive3||0) + (chanceoflive4||0) + (chanceoflive7||0);
var chanceoflivepercent = chanceoflivefinal * 4;
function startup(){
if (chanceoflivefinal == 25) {
alert("You Got 100%!");
}
}
<body onload="startup">
<center>
<h2 class="text">Final Results</h2>
<p id="print" class="text"></p>
<p id="print2" class="text"></p>
<img src="qrcode.jpg" height="300" length="300">
<br>
<div class="wrapper">
<a href="index.html">
<button align=center onclick="handleClick()" id="button">
<canvas width="200" height="50" id="canvas" align=center></canvas>
<span class="text" id="submit">Retry</span>
</button>
</a>
</div>
</center>
</body>
How can I fix this?
You could always do something like this within a script tag:
(function(){ // on document load
alert("Ready!"); // alert "ready"
})();
Oh, and as #Barmar said, to call that function, you need to change startup to startup()
You are just missing (); like this onload="startup();".
Perhaps you can also use
document.onload = startup();
or even
window.onload = startup();

JS - Get and Insert URL

var divs = document.getElementsByClassName('clsItemBlock');
for (var i = 0; i < divs.length; i++) {
var iDiv = document.createElement('div');
iDiv.id = 'detail_button';
document.getElementsByClassName('clsItemPublished')[i].appendChild(iDiv);
iDiv.innerHTML = 'View Details';
}
The code above works and adds a 'View Detail' button to every product on a category page. What I'm need to now do with this is get the URL from another element and swap out what is currently ### in the example above.
It is essentially the first href inside of the class "clsItemMoreDetails". I've found chunks of code to do some pieces, but can't seem to piece it all together.
EDIT
Here is the HTML:
<div class="clsItemMoreDetails">
<a title="Strapless Ruffle Dress" class="onlineUser" href="http://www.runwaycrush.com/women/dresses/strapless-ruffle-dress.html">
<p class="clsItemHead">Strapless Ruffle Dress</p>
</a>
<div class="clsCategorydateBlock clsOverflow">
<p class="clsItemCategory">
<a href="http://www.runwaycrush.com/shop/ocean-avenue.html" title="Check out OceanAvenue's store">
<span>OceanAvenue</span>
</a>
</p>
<p class="clsItemPublished">$68.24
<span>USD</span>
</p>
</div>
</div>
Theoretically you should do something like this:
var url = document.getElementById("#id_of_some_element").href;
iDiv.innerHTML = 'View Details';
Presuming that other element has href property.

jQuery find closest

I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});
Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});
If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");
Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});

Get content id (greatest) by clicking button on it Jquery

I need to get comment id when clicking to report button (I want to get comment-6)
Now when I click 'report' it show a modal box with form.
<div class="comment-box medium-comment" id="comment-6">
<div class="photo-box">
<img src="img/samples/photo_1.jpg" alt="" class="photo rounded"/>
</div>
<div class="avatars">
<a href="#" title="">
<img src="img/samples/followers/1.jpg" alt=""/>dearskye
</a>
<span>commented on</span>
<a href="#" title="">
<img src="img/samples/followers/2.jpg" alt=""/>Antony12
</a>
</div>
<div class="comment rounded">
<div class="bg-tl"></div>
<div class="text">Happy golden days of yore
Happy golden days of yore Happy golden days
of yore</div>
<div class="buttons">
REPORT
</div>
</div>
<div class="cinfo">
2 дня назад
</div>
<div class="both"></div>
</div>
clicking to
REPORT
call jquery
jQuery('a.report').bind('click', function(event) {
showModalWindow('report-window');
});
and function is
function checkReportForm(form)
{
var result=true;
var select=jQuery("#report-window select");
var textarea=jQuery("#report-window textarea");
if(textarea.hasClass('default'))
{
//Save placeholder
textarea.data('placeholder', textarea.text());
textarea.toggleClass('default');
}
textarea.attr('class','rounded');
if(select.val()==0)
{
if(textarea.val()==''||textarea.val()==textarea.data('placeholder'))
{
result=false;
textarea.toggleClass("alert");
}
}
if(result)
{
closeModalWindow('report-window');
}
I tried to do it but nothing. I suppose it is possible otherwise will think to change code. I hope someone will help me.
You can use closest to get the closest element which cotains the required class and get its id. Try this.
jQuery('a.report').click(function() {
var $commentBox = $(this).closest(".comment-box");
var id = $commentBox.attr('id').replace('comment-', '');
alert(id);//It will alert the comment id
//Store the comment id in report window
$('#report-window').data('commentid', id);
});
Now use $('#report-window').data('commentid') to get the current comment id inside checkReportForm method.
If i understand you correctly, the following should fetch the comment id for you:
$(".report").click(function() {
var $box = $(this).parents(".comment-box");
var commentId = $box.attr("id").replace("comment-", "");
// commentId contains 6
// call showModalBox and do whatever you want
});
When this context is your report link:
var id = Number(this.parentNode.parentNode.id.substring(8));

Categories