Online Demo : http://jsfiddle.net/thefourtheye/jRym8/
<html lang = "en">
<head>
<title> Document </title>
<script>
function filterFilms(selectBox) {
var displayArea = document.getElementById("displayArea");
displayArea.innerHTML = selectBox.id + "," + selectBox.value + "," + selectBox.selectedIndex + "," +
selectBox.options[selectBox.selectedIndex].text;
}
</script>
</head>
<body>
<select onchange="filterFilms(this);" id="films">
<option value="film1">Film Text 1</option>
<option value="film2">Film Text 2</option>
<option value="film3">Film Text 3</option>
</select>
<select onchange="filterFilms(this);" id="colors">
<option value="color1">Color 1</option>
<option value="color2">Color 2</option>
<option value="color3">Color 3</option>
</select>
<div id="displayArea"/>
</body>
</html>
You can use the same function to do this. Pass the current element as the parameter. And
- You can get the id of the select box clicked with
selectBox.id - You can get the selected option's value with
selectBox.value - You can get the selected option's index with
selectBox.selectedIndex - You can get the selected option's text with
selectBox.options[selectBox.selectedIndex].text
Yes it should work, as this demonstrates:
<script>
function thisMethod1(socialArray)
{
alert(socialArray);
}
</script>
<img src="img.png" alt="picture" onclick="thisMethod1(['Facebook','Twitter'])"/>
If the image is inside a link, then clicking it might cause the link to submit, so that may be causing you to think there's an error in your code.
Yes, though best practice says not to use inline code (in the tag).
To get the method:
var method = document.getElementById("player").getAttribute("data-method");
And to get the id:
var id = document.getElementById("player").getAttribute("data-id");
In addition to @chris97ong answer, if you use jQuery, then you can use such constructions:
var method = $('#player').data('method');
var id = $('#player').data('id');
But if you want to paste id and method values directly to javascript, then use:
var method = "<?php echo $data['id']>";
var id = "<?php echo $data['method']>";
Exactly like in your own way.
Pass data using Session Storage or Local Storage: (basic example)
You can pass data from one page to the next using sessions storage. Alternatively you can also use local storage which behaves in similar fashion. Except local storage will not be cleared when the session is closed.
For local storage just replace sessionStorage with localStorage.
Array to store:
var testArray = ['test'];
Storing the Array:
$('#store').on('click', function(){
sessionStorage.setItem('myArray', testArray);
});
Getting the Array:
$('#get').on('click', function(){
var myArray = sessionStorage.getItem('myArray');
alert(myArray);
});
Clearing the Session Storage:
$('#clear').on('click', function(){
sessionStorage.clear();
});
HTML:
<a href="javascript:void(0);" id="store">Store Array</a>
<a href="javascript:void(0);" id="get">Get Array</a>
<a href="javascript:void(0);" id="clear">Clear</a>
Checking to see stored session in chrome:
If storing stringified data, make sure to convert back to JSON:
var mydata = localStorage.getItem("GoogleLatLng");
var myObject = JSON.parse(mydata);
DEMO:
http://jsfiddle.net/mdktpmw2/
Supporting older versions of Internet Explorer:
- http://modernizr.com/docs/
- https://github.com/pamelafox/lscache
- http://amplifyjs.com/
Some Resources:
- http://caniuse.com/#feat=namevalue-storage
- http://davidwalsh.name/html5-storage
You'll want to post the data to another page. There are a ton of tutorials that can walk you through it, including some Stack answers that have already been answered:
how can i send the data to another page without appending it in url?
passing form data to another HTML page
You'll probably want to grab the data in your onLoad of the next page.
Use JSON.
In the following example $php_variable can be any PHP variable.
<script type="text/javascript">
var obj = <?php echo json_encode($php_variable); ?>;
</script>
In your code, you could use like the following:
drawChart(600/50, <?php echo json_encode($day); ?>, ...)
In cases where you need to parse out an object from JSON-string (like in an AJAX request), the safe way is to use JSON.parse(..) like the below:
var s = "<JSON-String>";
var obj = JSON.parse(s);
You can pass PHP arrays to JavaScript using json_encode PHP function.
<?php
$phpArray = array(
0 => "Mon",
1 => "Tue",
2 => "Wed",
3 => "Thu",
4 => "Fri",
5 => "Sat",
6 => "Sun",
)
?>
<script type="text/javascript">
var jArray = <?php echo json_encode($phpArray); ?>;
for(var i=0; i<jArray.length; i++){
alert(jArray[i]);
}
</script>
If this array will only be used by JavaScript, then do NOT use a cookie. Cookies are for storing information that the server needs access to, and setting them willy-nilly can increase your network usage by a significant amount!
Instead, use JavaScript's localStorage interface. It is supported by all modern browsers (IE7 and below don't count as "modern", especially with Windows Update practically forcing you to update), and is real easy to use:
var someArray = [1,2,3,4];
if( !window.localStorage) alert("Sorry, you're using an ancient browser");
else {
localStorage.myArray = JSON.stringify(someArray);
}
Later, you can retrieve it: JSON.parse(localStorage.myArray)
I hope this is what you are trying to achieve. If not, please clarify your question some ;)
If the code is linked to an image, it would be more like this:
<img src="images/img1.png" alt="" onclick="window.location.href='1stpage.html?var1=5&var2=6';">
Modify it to fit your needs :P
There are a couple of ways of getting HTML elements and putting them in an array. Consider the following line to select your elements.
const cards = document.querySelectorAll('.card');
Your card elements are now stored in a NodeList, which is an array-like object. Think of it as an object with indexes. You can use the following examples to convert your list into an array.
The Array.from method.
This method will return a new array with all the indexes of an array-like or iterable object.
const arr = Array.from(cards);
Spread syntax.
This is an ES6 feature which will lay each individual index in a new array. It's also a great way to concatenate arrays.
const arr = [...cards];
Slice and call.
This is an old one, but if you'll need IE11, or less, browser support then this will work in most cases.
var arr = Array.prototype.slice.call(cards);
Loop and push.
It's also possible to loop the NodeList or HTMLCollection and push each element into a new array.
var arr = [];
for (var i = 0; i < cards.length; i++) {
arr.push(cards[i]);
}
To tackle this issue, I would say first, you don't need to treat the DOM object as an array you need to shuffle. it is the image you need to shuffle.
So you just need to build an array of image URL. you may want to have identifier with it so it would be an object { key: "banana", url: "assets/img/banana.png" }
then you pass this array of object to your function to shuffle it and change the URL of each Dom object using JS
Try this:
App.js
var earn = [100, 200];
var textfield1 = Ti.UI.createTextField({
value: earn[0],
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textfield1);
var textfield2 = Ti.UI.createTextField({
value: earn[1],
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textfield2);
var webview = Titanium.UI.createWebView({
url: 'chart.htm'
});
win.add(webview);
webView.addEventListener('load', function (e) {
webview.evalJS('createPie(earn);');
});
Chart.htm
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>
<div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"></div>
<script type="text/javascript">
function createPie(arr) {
var p = new pie();
p.add("Jan", arr[0]);
p.add("Feb", arr[1]);
p.render("pieCanvas", "Pie Graph");
}
</script>
Checkout this link for more help : http://developer.appcelerator.com/question/73121/passing-variable-from-titanium-js-class-to-html-script-
Your earn array will not dynamically update when you change the textfields, if that is what you are asking. You have to listen for when the texfields fire change events, capture that event, and get the new values, now you can update the pie chart.
To make it so that up update the graph whenever someone changes the value in the texfields you need to do this:
/* app.js */
var textfield1 = Ti.UI.createTextField({
value:' ',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
/* This is the important part */
textfield1.addEventListener('change', function(e) {
var earn = [textfield1.value, textfield2.value];
webview.evalJS('createPie(' + JSON.stringify(earn) +');');
});
var textfield2 = Ti.UI.createTextField({
value:' ',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
/* This is the important part */
textfield2.addEventListener('change', function(e) {
var earn = [textfield1.value, textfield2.value];
// DO this
webview.evalJS('createPie(' + JSON.stringify(earn) +');');
});
var webview = Titanium.UI.createWebView({
url: 'chart.htm'
});
// Add views
win.add(textfield1);
win.add(textfield2);
win.add(webview);
And in your HTML (I've taken from Mohit's well crafted HTML):
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>
<div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"></div>
<script type="text/javascript">
function createPie(arr) {
var earn = eval(arr); // convert from JSON string to JS, alternatively use JSON.parse
var p = new pie();
p.add("Jan", earn[0]);
p.add("Feb", earn[1]);
p.render("pieCanvas", "Pie Graph");
}
</script>
Now you have the bones, you may have to mess with the createPie() function, check out the link Mohit sent, this is written out in detail there.