Change img and save the cookie html & javascript - javascript

This code replaces the image And keeping the cookies
Is there a mistake? I do not know the solution.
<html>
<button onclick="hideImage()"> Remove img </button>
<img id="my_images" src="http://karachiairport.com.pk/images/data-section/airline/24-11.png">
<script>
document.addEventListener('DOMContentLoaded', function() {
// If cookie exist
if (document.cookie.indexOf('image_clicked') > -1) {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
}
function hideImage() {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
document.cookie = "image_clicked=true";
}
});
</script>

Please try this.
Now 'hideImage is not defined' error is resolved.
<html>
<button onclick="hideImage()"> Remove img </button>
<img id="my_images" src="http://karachiairport.com.pk/images/data-section/airline/24-11.png">
<script>
document.addEventListener('DOMContentLoaded', function() {
// If cookie exist
if (document.cookie.indexOf('image_clicked') > -1) {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
}
});
function hideImage() {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
document.cookie = "image_clicked=true";
}
</script>

Related

JavaScript Image Swap Errors

I am trying to create an Image Swap with Javascript. Can anyone point me in the direction of where my coding error is in JavaScript? Am I using the getElementByID incorrectly? Any help or direction is much appreciated!
<title>Photo Gallery</title>
</head>
<header>
<h1>Gallery</h1>
<div>
<img alt="images" src="Skelton_ImageSwap/images/Lilly.jpg"
style="height: 350px; width: 350px" id="Lilly">
</div>
</header>
<body>
<img src="Skelton_ImageSwap/images/Lilly.jpg" alt ="images" id ='Lilly' onclick.changeImage()>
<img src ="Skelton_ImageSwap/images/Lotus.jpg" alt = "images" id='Lotus' onclick.changeImage()>
<img src="Skelton_ImageSwap/images/Roses.jpg" alt="images" id='Roses'onclick.changeImage()>
<img src="Skelton_ImageSwap/images/Tulip.jpg" alt="images" id='Tulip'onclick.changeImage()>
</body>
<script>
function changePicture()
{
if (image.getElementByID.onclick.changePicture == "Lilly")
{
image.src = "Skelton_ImageSwap/image/Lilly.jpg";
}
if (image.getElementByID.onclick.changePicture == "Orchid")
{
image.src = "Skelton_ImageSwap/image/Orchid.jpg";
}
if (image.getElementByID.onclick.image == "Roses")
{
image.src = "Skelton_ImageSwap/image/Roses.jpg";
}
else
{
image.src = "Skelton_ImageSwap/image/Tulip.jpg";
}
}
</script>
On your img tags the onclick function is not wrote correctly should look like
onClick="changeImage()"
Also "changeImage" is not a function you wrote a function called "changePicture" so it should really look like
onClick="changePicture()"
Now in your changePicture function there are a few issues specifically the getElementById function is not being used correctly also you got the name wrong on it you capitalized the 'D' at the end which shouldn't be, I would recommend changing the id on your header tag img from 'Lilly' to 'preview' since element id's need to be unique and you've already used 'Lilly' as an id than replace your script tag with this
<script>
document.getElementById("Lilly").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Lilly.jpg"
});
document.getElementById("Lotus").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Lotus.jpg"
});
document.getElementById("Roses").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Roses.jpg"
});
document.getElementById("Tulip").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Tulip.jpg"
});
</script>

Javascript - Share Variables over different <script> tags

I have one test.html file with two <script> tags. I need to share a variable from one to another..
Sample code:
<script type="text/javascript">
var test = false;
function testing() {
test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
The output is always:
I am inside..
failed
I also tried to use the window class but it doesn't matter.. (window.test)
What I have to do to get the 'working' alert?
Thanks if anyone can help me. I saw some similar questions, but the answers wasn't a solution for me.
EDIT:
The original code (simplified):
<head>
...
<script type="text/javascript" src="detectblocker.js"></script>
<!-- GitHub: https://github.com/sitexw/BlockAdBlock/ -->
...
</head>
<body>
<script type="text/javascript">
var blocker = false;
function adBlockDetected() {
blocker = true;
alert('inside');
}
if(typeof blockAdBlock === 'undefined') {
adBlockDetected();
} else {
blockAdBlock.onDetected(adBlockDetected);
}
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
</script>
<div class="header">
...
</div>
<div class="content_body">
<div class="requirs">
<ul>
...
<script type="text/javascript">
if (blocker == true) {
document.write("<li>enabled!</li>")
} else {
document.write("<li>disabled!</li>")
}
</script>
...
</ul>
</div>
</div>
...
</body>
The output is an alert() "inside" and the <li> "disabled".. (Blocker is enabled..).
The only difference I can see is on the end of the first <script> tag:
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
So why the snippet is working and my code not? Confusing...
If you do not use var before a variable it becomes a global variable like
test = true;
The variable test will be true during the page and also in your next scripts and functions.
Try this:
<script type="text/javascript">
var test = false;
function testing() {
var test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
There are two ways of doing it.
1) create a hidden element and set your variable from your first script to attribute of that element.
This is your hidden element
<input type="hidden" id="hiddenVar"/>
and can set it in javascript as
document.getElementById("hiddenVar").setAttribute("myAttr",test)
Now you can get it in next script as
document.getElementById("hiddenVar").getAttribute("myAttr")
2) By .data() you can read about it here

Json Object to HTML table

I have a simple page with a "button/link" when i press the button i need to call the github api to return all issues logged in my repository and show in table format.
But when i hit the link nothing happends..
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix">
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
</script>
</div>
</body>
</html>
Can anyone point me to where i have gone wrong with my code
your script is inside your div tag. When you change the html inside it, whole script will be removed. Try to place the script outside the div tag.
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix"></div>
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
You should see errors in your console. You didn't close the functions right
$(function () {
$('#ghsubmitbtn').on('click', function (e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function (json) {
if (json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
} else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
});
});
});
please look here again
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
The second parameter requires id of your table you have no table with id jsonTable i think that is the problem

Variables in JavaScript: An error arrives [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
When I am starting my website, the JavaScript does not work. Safari gives an error:
TypeError: 'null' is not an object (evaluating 'document.getElementById("aktuell").innerHTML')
This is my JavaScript-code:
<script>
var aktueller = document.getElementById("aktuell").innerHTML;
function go() {
neu = aktueller - 1;
document.getElementById("aktuell").innerHTML = neu;
if (neu == 1) {
document.getElementById("zweite").style.display = 'none';
document.getElementById("dritte").style.display = 'none';
}
else if (neu == 2) {
document.getElementById("dritte").style.display = 'none';
}
else if (neu == 0) {
document.getElementById("erste").style.display = 'none';
document.getElementById("zweite").style.display = 'none';
document.getElementById("dritte").style.display = 'none';
}
}
</script>
And this is my used body-part:
<body>
<p id="aktuell" style="display:none;" >0</p>
<center>
<button>Zurück</button><button onclick="go();">Weiter</button>
</center>
<div id="nullte"><img src="data/nullte.jpg" width="500px" /></div>
<div id="erste"><img src="data/erste.jpg" width="500px" /></div>
<div id="zweite"><img src="data/zweite.jpg" width="500px" /></div>
<div id="dritte"><img src="data/dritte.jpg" width="500px" /></div>
</body>
you have to wait until the page is completely loaded:
<script>
var aktueller = null;
window.onload = function(){
aktueller = document.getElementById("aktuell").innerHTML;
}
function go() {
//....
}
</script>
you can also do it like:
var aktueller = null;
window.addEventListener("load", function(){
aktueller = document.getElementById("aktuell").innerHTML;
});
the other option is to use onload event on body tag:
<head>
<script type='text/javascript'>
var aktueller = null;
function init(){
aktueller = document.getElementById("aktuell").innerHTML;
}
function go(){
//...
}
</script>
</head>
<body onload="init();">
</body>
although if you use jquery you have other options like:
var aktueller = null;
$(document).ready(function(){
aktueller = $("#aktuell").html();
});
When the script is evaluated, the Body is not yet built. You need to place the script and the end of the body, or put it inside of a document ready section, by using jQuery.
$(document).ready(function() {
var aktueller = document.getElementById("aktuell").innerHTML;
/* more code goes here */
});
More info here.
Why I would avoid using window.onload here.

Javascript delayed image loading

I am trying to delay the loading of images using plain JS. my method to do this is by giving empty src field for the image and inserting the image url into a temp attribute called "lang" as used in the example below. ie >
<img lang="logo.gif"> instead <img src="logo.gif">. When pressing a button the js below is initiated to insert into src attr the value of the dummy "lang" attr.
function showimagesunderdiv(divid)
{
tr = document.getElementById(divid);
pics=tr.getElementsByTagName('img');
for(i=0;i<pics.length;i++)
{
if(pics[i].lang)
{
pics[i].src=pics[i].lang;
pics[i].style.display='';
}
}
}
While this works is Chrome and FF, IE is doing problems. Any idea?
Maybe this:
<html>
<body>
<p>Images:</p>
<img name=image0>
<img name=image1>
<img name=image2>
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
function LoadImage(imageName,imageFile)
{
if (!document.images) return;
document.images[imageName].src = imageFile';
}
LoadImage('image4','number4.gif');
LoadImage('image5','number5.gif');
LoadImage('image6','number6.gif');
LoadImage('image7','number7.gif');
</script>
</html>
Or this:
<html>
<body>
<p>Images:</p>
<img name=image0 onLoad="LoadImage('image1','number1.gif')">
<img name=image1 onLoad="LoadImage('image2','number2.gif')">
<img name=image2 onLoad="LoadImage('image3','number3.gif')">
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
if ((!document.images) || loadingImage) return;
loadingImage = true;
if (document.images[imageName].src.indexOf(imageFile)<0)
{
document.images[imageName].src = imageFile;
}
loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>
</html>
I know it is not a correction of your code but I cant see whats wrong...
This is a very compatible solution!
Hope it helps! resource:
http://www.cryer.co.uk/resources/javascript/script3.htm
Give each image tag an ID, store the IDs and URLs in an array:
imagesToLoad = [["imgId1", "http://..."], ["imgId2", "..."], ...];
And use:
function showimages(imageList)
{
for(var x = 0; x < imageList.length; x++) {
document.getElementById(imageList[x][0]).src = imageList[x][1];
}
}
showImages(imagesToLoad);

Categories

Resources