I'm fairly new to javascript, and getting quite frustrated by the following code
<!DOCTYPE html>
<html>
<script>
var time = '0'
var area = 'neast'
function update_area(input) {
area = input;
load_updated_image(area,time);
};
function update_time(input) {
time = input;
load_updated_image(area,time);
};
function load_updated_image(area,time) {
var url = 'http://personal.psu.edu/kps5442/modelimages/hrrr_'+area+'_wetbulb'+time+'.png';
document.getElementById("theImage").src = url;
document.getElementById("url").innerHTML = url;
};
</script>
<body onload="load_updated_image(area,time)">
<p>URL Output:</p>
<p id="url"></p>
<font size = 4><b>Forecast Hour: </b>
<font size = 3>
<a href="#" onmouseover="update_time(0);" /> 00</a>
<a href="#" onmouseover="update_time(1);" /> 01</a>
<a href="#" onmouseover="update_time(2);" /> 02</a>
<img id="theImage" src=undefined width="850" height="600" />
<br> <font size = 4><b>Region Selection: </b>
<a href="#" onclick="update_area(neast);" /> Northeast</a>
<a href="#" onclick="update_area(seast);" /> Southeast</a>
</body>
</html>
I have 18 different "hours" of images for different regions across the US. The goal is to change the hour of the image when the hour links are moused over, and update the region when the region links are clicked.
The function update_time() works as expected, changing the image as I mouse over the links. However, the function update_area() fails with the following error:
"Uncaught ReferenceError: neast is not defined"
I'm not sure why this is happening, because the update_time and update_area functions are built in exactly the same way, and I globally defined the time and area variables at the start of the script.
Any help would be appreciated!
You have to put the arguments in quotes .
onclick="update_area('neast');"
onclick="update_area('seast');"
<!DOCTYPE html>
<html>
<script>
var time = '0'
var area = 'neast'
function update_area(input) {
area = input;
load_updated_image(area,time);
};
function update_time(input) {
time = input;
load_updated_image(area,time);
};
function load_updated_image(area,time) {
var url = 'http://personal.psu.edu/kps5442/modelimages/hrrr_'+area+'_wetbulb'+time+'.png';
document.getElementById("theImage").src = url;
document.getElementById("url").innerHTML = url;
};
</script>
<body onload="load_updated_image(area,time)">
<p>URL Output:</p>
<p id="url"></p>
<font size = 4><b>Forecast Hour: </b>
<font size = 3>
<a href="#" onmouseover="update_time(0);" /> 00</a>
<a href="#" onmouseover="update_time(1);" /> 01</a>
<a href="#" onmouseover="update_time(2);" /> 02</a>
<img id="theImage" src=undefined width="850" height="600" />
<br> <font size = 4><b>Region Selection: </b>
<a href="#" onclick="update_area('neast');" /> Northeast</a>
<a href="#" onclick="update_area('seast');" /> Southeast</a>
</body>
</html>
In JavaScript variables are not restricted to a single 'type', but a String will always be contained in quotes and a number will not. Also a variable cannot be, or start with, a number. This is why when you use a string as an argument it must be contained within quotes, otherwise it thinks you are sending a variable.
You're starting your document with <!doctype html> so you're saying you're writing HTML5, but there is a whole bunch of things that are incredibly wrong here due to use HTML3.2 and obsolete ways to invoke javascript.
Under modern HTML5 rules, there are no self-closing elements. It's not a hard error, but don't add that /> at the end of an <img.... Also <font> hasn't existed as element for 20 years now. It was removed in HTML4.1 in 1998. Then some semantics: if you need button functionality (i.e. clickable, but NOT navigating to some (part of a) page), use <button>. That's what it's for. Do not use <a>, and definitely not with href="#", because that's an active instruction for the browser to scroll to the top of the page. Finally, on...=... handlers are an ancient attribute that is unfortunately still supported, but you should never use. Use addEventListener in your Javascript, after you've declared all your HTML.
So let's just fix everything at the same time:
<!-- this line literally tells the browser "I am using HTML5" -->
<!DOCTYPE html>
<html>
<!-- always have a header section -->
<head>
<!-- no / at the end of meta elements -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Always just fill this in, it's good practice</title>
<style>
/* you want this in its own file, see the note at the end of this post */
h1 {
font-size: 100%;
font-weight: bold;
}
</style>
</head>
<body>
<!-- sectioning isn't mandatory, but extremely good practice -->
<section id="output">
<h1>URL Output:</h1>
<p>Forecast Hour:</p>
<div class="controls">
<!-- let's use data attributes, and be explicit about the values here -->
<button class="forecast update" data-value="0">0h</button>
<button class="forecast update" data-value="1">1h</button>
<button class="forecast update" data-value="2">2h</button>
</p>
<!-- if you've never see the figure/figcaption elements: they exist -->
<figure id="forecast-image">
<!-- no / at the end of this element -->
<img src="placeholder.jpg" width="850" height="600" alt="forecast map">
<figcaption></figcaption>
</figure>
</section>
<section>
<h1>Region Selection</h1>
<div class="controls">
<button class="area update" data-value="neast">Northeast</buton>
<button class="area update" data-value="seast">Southeast<button>
</div>
</section>
<!-- don't put your script in the page. put it in its own file -->
<script src="updates.js"></script>
</body>
</html>
And then we make a second file for the javascript called updates.js:
// this goes last, so that the DOM is done by the time you invoke your script.
var currentTime = 0;
var currentArea = `NorthEast`;
// this function doesn't need parameters: we already know what they are
function load_updated_image() {
var url = `http://personal.psu.edu/kps5442/modelimages/hrrr_${currentArea}_wetbulb${currentTime}.png`;
let figure = document.getElementById(`forecast-image`);
// update the image
let img = figure.querySelector(`img`);
img.src = url;
// update the image caption with a link
let caption = figure.querySelector(`figcaption`);
caption.innerHTML = ``;
let link = document.createElement(`a`);
link.href = url;
caption.appendChild(link);
}
// update the area, and called image update
function update_area(area) {
currentArea = area;
load_updated_image();
};
// update the time, and called image update
function update_time(time) {
currentTime = timel
load_updated_image();
};
// add the initial page load handling
document.addEventListener(`ready`, evt => load_updated_image());
// add the click handling for forecast time buttons
let forecastButtons = document.querySelectorAll(`button.forecastupdate`);
forecastButtons.forEach(button => {
// get the button's data-value
value = button.dataset.value;
// and then set up a click listener to update the forecast time
button.addEventListener(`click`, evt => update_time(value));
});
// add the click handling for forecast area buttons
let areaButtons = document.querySelectorAll(`button.area.update`);
forecastButtons.forEach(button => {
// get the button's data-value
value = button.dataset.value;
// and then set up a click listener to update the forecast area
button.addEventListener(`click`, evt => update_area(value));
});
And then to be even more proper, don't use <style>...</style> but make a new file called "forecast.css" and then link to that in your page using <link href="forecast.css" rel="stylresheet"> (note: this is still HTML5, you don't put /> at the end. Link elements simply don't have a closing tag)
Related
When I make a page, I'm stucking in caching problem. Here is my simplified code.
[HTML]
<body>
<div>here parent contents</div>
<input id="btn1" class="btn" data-val="1" type="button" />
<input id="btn2" class="btn" data-val="2" type="button" />
<input id="btn3" class="btn" data-val="3" type="button" />
<div id="childContents"></div>
</body>
[javascript]
$(".btn").click(function (e) {
$("#childContents").load("url?val=" + e.getAttribute("data-val"),
function () {
success call back function
});
});
And the point is that :
[Child Html]
<!-- the image change depanding on some condition -->
<div style="background-image: url('imgUrl')">
contents
</div>
Whenever I click button and reload the child view, I hope the image, which child view has, change.
But since the cached image, the child's image does not change. How can I do for it?
I want to solve it with javascript, since sometimes the jquery version become a big problem and I always consider the version of it. So I want to make my code of small dependance on jQuery. (eg. jquery’s async ajax’s option and so on is not working lower version of IE)
You can add the current time as a cache breaker.
$(".btn").click(function (e) {
$("#childContents").load("url?val=" + e.getAttribute("data-val"),
function () {
//get time since 1970 in milliseonds
var d = new Date();
var n = d.UTC();
//append a cache breaker
var imgUrl = "background.jpg" + "?t=" + n;
//set the img url
$('#backgrounddiv').css('background-image', 'url("'+imgUrl+'")');
});
});
<div id="backgrounddiv" style="background-image: url('background.jpg')">
contents
</div>
I'm really confused on how to go about this.
What I'm trying to do is, have a form in HTML (not <form>), just a bunch of <input> tags with a <button>.
Basically, in the javascript code, there's an event listener that activates the MakeCard() method, when the <button> is pressed.
The MakeCard() method is supposed to then replace the form (in the HTML body) with a <div> that has it's own random stuff.
How do I make this system work? Please no JQuery and other such libraries. I'm only allowed to use DOM.
This is the code I have so far:
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script>
window.addEventListener("load", function(){
var nameOfRecipient = document.getElementById("nameOfRecipient");
var colorInfo = document.getElementById("colorInformation");
var fontSize = document.getElementById("fontSize");
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient");
var resultColorInfo = document.getElementById("resultColorInformation");
var resultFontSize = document.getElementById("resultFontSize");
function MakeCard(){
// Make the card
// Show the results
ShowResults();
}
function ShowResults(){
// Show the user choices
resultNameOfRecipient.innerHTML = nameOfRecipient.value;
resultColorInfo.innerHTML = colorInfo.value;
resultFontSize.innerHTML = fontSize.value;
}
document.getElementById("submitButton").addEventListener("click", MakeCard);
});
</script>
</head>
<body>
<div id="headerContainer">
Welcome to the Card Maker!
</div>
<div id="formContainer">
<p>Name of recipient<input type="text" id="nameOfRecipient"></p>
<p>Color Information<input type="text" id="colorInformation"></p>
<p>Font Size<input type="number" id="fontSize"></p>
<input type="button" id="submitButton" value="Make Card!">
</div>
<div id="resultContainer">
<p id="resultNameOfRecipient"></p>
<p id="resultColorInformation"></p>
<p id="resultFontSize"></p>
</div>
</body>
PLEASE IGNORE THE LAST DIV WITH ID="resultContainer" and ignore all the variables that have the result in front. That stuff is other extra stuff.
It would be amazing if I could just know how to make an entirely new div that REPLACES the div with ID="formContainer".
First things first: Why use listeners when you can use onclick tags? Set the button like this, and change the listener to a dedicated function:
window.addEventListener("load", function(){
becomes
function myfunction() {
and don't forget to change the end of the script from }); to }..
Also, remove the listener from the button, which is this line.
document.getElementById("submitButton").addEventListener("click", MakeCard);
And add an onclick event to the button, and change it to a button type, to make sure it doesn't submit:
<button type="button" id="submitButton" onclick="myfunction()">Make Card!</button>
Secondly: You've set variables to actual HTML elements, which would show something like: HTML[buttonElement]... I'm assuming what you want is what was typed in the element, which is the "value" tag. You would get that by changing the variables to this:
var nameOfRecipient = document.getElementById("nameOfRecipient").value;
var colorInfo = document.getElementById("colorInformation").value;
var fontSize = document.getElementById("fontSize").value;
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient").value;
var resultColorInfo = document.getElementById("resultColorInformation").value;
var resultFontSize = document.getElementById("resultFontSize").value;
So now that we've tidy'd up your syntax and stuff, I wanna get on to the part where you said you wanted to replace the DIV. Here's my way of doing it:
I would give every element in the DIV an ID (other than the button, we've already discussed that).
<p id="nameofrecipentp">Name of recipient<input type="text" id="nameOfRecipient"></p>
<p id="colorinformationp">Color Information<input type="text" id="colorInformation"></p>
<p id="fontsizep">Font Size<input type="number" id="fontSize"></p>
You could then call a function when the function myfunction() is called.
function myfunction() {
replacediv()
And define replacediv() to replace all the elements in the form to whatever you'd like.
function replacediv() {
document.getElementById("nameofrecipentp").innerHTML =
"Enter your data here"
document.getElementById("colorinformationp").innerHTML =
"Enter your data here, for the color information"
document.getElementById("fontsizep").innerHTML =
"enter your data here for font size"
}
I think I pretty much covered everything. If you still need help, tell me.
I'm trying to load an array filled with the src attribute from a series of img tags in my HTML document.
HTML:
<html>
<head>
<title>
JQuery Slider
</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id = "wrapper">
<h1 class="dark-header">2014 Salt Lake Comic Con FanX</h1>
<div id="background-img">
<img src="img/img01.jpg"/>
</div>
<div>
<img src="img/img02.jpg"/>
</div>
<div>
<img src="img/img03.jpg"/>
</div>
<div>
<img src="img/img04.jpg"/>
</div>
<div>
<img src="img/img05.jpg"/>
</div>
<div>
<img src="img/img06.jpg"/>
</div>
<div>
<img src="img/img07.jpg"/>
</div>
<div>
<img src="img/img08.jpg"/>
</div>
<div>
<img src="img/img09.jpg"/>
</div>
<div>
<img src="img/img10.jpg"/>
</div>
</div>
</body>
</html>
JQuery:
$(document).ready(function() {
var source = new Array();
$('img').each(function(attr) {
source.push($('img').attr('src'))
});
console.log(source)
});//end document.ready
The output to the console is an array of 10 elements, but only using the first img attribute. I'm not sure how to get the each function to go through all elements and push them to the array.
Your issue is that $('img').attr('src') will always return the value of the first element in the collection of elements.
As pointed out in comments , you need to look at specific instances within your loop
Another way you can do this is using map() which will create the array for you
var source = $('img').map(function(){
return $(this).attr('src');
}).get();
DEMO
You could try something like this:
var source = [];
$('img').each(function() {
source.push( this.getAttribute('src') );
});
In your each code, you re-select the entire group with $('img') so it is only adding the first one of THAT Selection to your array.
OR
If you aren't using jQuery for anything else, you could do it in straight javascript like this:
document.addEventListener('DOMContentLoaded', getImgAttr);
var source = [];
function getImgAttr() {
var imgs = document.querySelectorAll('img');
[].forEach.call(imgs, function( img ) {
source.push( img.src);
});
}
you need to use 'this' while inside the loop to reference the image, otherwise you are getting the reference to first 'img ' tag.
it should be like this:
$('img').each(function(attr) {
source.push($(this).attr('src'))
});
Your callback function needs to accept a second param...
The first param is the current index of the array and the second param is the object at that index.
You may also utilize the keyword this as suggested above.
Based on my answer your code would look like this:
$('img').each(function(i, img) {
source.push($(img).attr('src'));
// alternatively -> source.push($(this).attr('src'));
});
A second option you may like and puts what you're trying to do onto a single line would be to use the jQuery map function...
var source = $.map($('img'), function(img) { return $(img).attr('src'); });
Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?
I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.
Sorry if this is a silly question, but I've been trying to use AJAX to display my javascript variables in 'real time' with little luck. I'm definitely a beginner though so this could be the problem haha- When I see the AJAX code, it always seems to require an additional url that it refreshes, but I just want to refresh the javascript variables on click.
http://jsfiddle.net/bagelpirate/m9Pm2/
<script>
var one = 0;
var two = 0;
var three = 0;
</script>
<body>
<div id="div_1">
One: <script>document.write(one)</script> |
Two: <script>document.write(two)</script> |
Three: <script>document.write(three)</script>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" />
</div>
</body>
As you can see in the above code, when a user clicks one of the images, I want to increment the count and display it at the top of the page. I found the HTML5 output tag, and was wondering if it's possible to use this to display the javascript variable in real time? Everything I've read seems to imply it can't be done because the output tag only works on forms? Anyway, I figured it couldn't hurt to ask!
Thanks for your time!
You shouldn't use document.write to write to the DOM after it's finished loading. You have tagged your question with jQuery, so I'll assume you can use that to update things. Instead, update the DOM from within your script block. Here is an example that might help you get started.
http://jsfiddle.net/prxBb/
<script type="text/javascript">
$(function() {
var one = 0;
var two = 0;
var three = 0;
$('img#mine').click(function() {
one++;
$('span#one').html(one);
});
$('img#forest').click(function() {
two++;
$('span#two').html(two);
});
$('img#farm').click(function() {
three++;
$('span#three').html(three);
});
});
</script>
<body>
<div id="div_1">
One: <span id="one"></span> |
Two: <span id="two"></span> |
Three: <span id="three"></span>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" />
</div>
</body>
Maybe you should try putting all your variables inside a named object, iterating through it at predefined interval and displaying the values.
var varContainer = {
one:0,
two:0,
three:0
};
jQuery("#div_2 img").on('click',function(){
jQuery.each(varContainer,function(key,value){
//Add key + value to the DOM
if(jQuery("."+key+value).length<1)
jQuery("#div_2").append("<div class='"+key+value+"'></div>");
var newHtmlVal= "<p><span>Var name: "+key+"</span><br><span>Value: "+value+"</span>";
jQuery("."+key+value).html();
});
});
HTML
<div id="div_2">
</div>
Of course the script could be upgraded to look through each variable recursivley in case of nested objects/arrays...
Hope this helps!