I have some variables sessionStorage containing sources of images, and what i should do is displaying them. In my HTML page I tried like this:
</div>
<h1 id="h1poggia">
Here's your choices:
</h1>
<div>
<script src="Script1.js">
riep();
</script>
</div>
And this is the funcion:
function riep() {
imuno = sessionStorage.getItem('imuno');
imdue = sessionStorage.getItem('imdue');
document.write(imuno, imdue);
}
But it seems the function doesn't even get retrieved! Where am I wrong?
This doesn't works:
<script src="Script1.js">
riep();
</script>
If you need to include an external script and then call to function maybe you need to separate that:
<script src="Script1.js"></script>
<script>
riep();
</script>
However you are using document.write that's dangerous and deprecated. Please, use this instead:
document.getElementById("myDiv").innerHTML = imuno+", "+imdue;
And set an ID to the div:
<div id="myDiv"></div>
Related
I'm developing a web app with Framework7. I'd like to move to another page when clicking a link, exporting a variable.
In index.php I have this:
<head>
<script type="text/javascript">
function myFunc(xyz) {
localStorage.setItem("variable", xyz);
}
</script>
</head>
<body>
<?php
foreach( [...] ) {
[...] // something not important
print('
<a onclick="myFunc('.$myVar.')" href="anotherPage.php">'.$myVar.'</a>
');
}
?>
</body>
In anotherPage.php I have this:
<p id="example"></p>
<script>
document.getElementById("example").innerHTML = localStorage.getItem("variable");
</script>
I don't know why it does not work... Can you help me?
P.S.:
I found this that may be useful: Ajax pages | Framework7
Thank you so much!
F7 is a SPA framework, it loads the new page without JS.
You should add a pageInit callback in you index.php
<a href="anotherPage.php?variable=xyz"/>
<script type="text/javascript">
myApp.onPageInit('another-page', function (page) {
// here is the variable
console.log(page.query.variable);
});
</script>
anotherPage.php should be formatted like this
<div class="navbar">
</div>
<div class="page" data-page="another-page">
...
</div>
There is another way to pass the variable by 'query' object.
https://framework7.io/docs/router-api.html
mainView.router.load({
url: "anotherPage.php",
query: {
variable: 'xyz',
...
}
});
i have searched around but cant find exactly what i need. i want the div, which contains a variable value, to update every time the variable changes. is this possible? without reloading the whole page, as this would reset the variable value.
<head>
<script> var eg=30</script>
</head>
<body>
<div> 30 </div>
<button onclick=eg++>increase</button>
</body>
how would i then make the div containing the number update
You have to write your variable to div after update it.
<head>
<script> var eg=30</script>
</head>
<body>
<div id="mydiv"> 30 </div>
<button onclick='eg++; document.getElementById("mydiv").innerHTML = eg;'>increase</button>
</body>
document.getElementsByTagName('div')[0].innerHTML = your_var;
Add this on the onclick event
<head>
<script> var eg=30</script>
</head>
<body>
<div id="display"> 30 </div>
<button onclick="eg++;document.getElementById('display').innerHTML = eg;">Increase</button>
Start by creating a function that both increases the counter, and updates the div. Then, call that function from onclick. If you place your script at the botton, you can easily remove all the inline scripts from your HTML, which would make it more organized and easier to read:
<body>
<div id="egDiv"> 30 </div>
<button id="egButton">increase</button>
<script>
var eg=30
// Function to increase the counter
function increaseEg() {
eg++;
document.getElementById('egDiv').innerHTML = eg;
}
// Add onclick handler, the simplest way:
document.getElementById('egButton').onclick = increaseEg;
</script>
</body>
I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
Edit: This should be a better solution, I'm a bit rusty in JavaScript.
You need to load your JavaScript event handlers after the page is loaded. The simplest way is making your code load when the document finishes loading and the window casts an onload-event.
<script type="JavaScript">
window.onload = function(){
document.getElementById('new_div').onclick = function() {
alert("Good morning, you are very beautiful today!");
}
}
</script>
you defined that div after your javascript code, so when you add your handler the div doesn't exist yet
reverse your code like so
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
<script type="text/javascript">
console.log(document.getElementById('new_div'))
</script>
to correctly attach an event use addEventListener (and attachEvent for IE<9)
or simply use document.getElementById('new_div').onclick = ... (but not recommended since you remove any previous defined handler, if any)
The new_div is not yet loaded when your javascript executes.
Try something like this:
$(document).ready(function()
{
$('#new_div').click(function()
{
alert(1);
});
});
Edit
I assume you use jQuery because you use .click(function() {
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="clicked(this);" id="test">test</div>
I think you jquery solves your problem beautifully.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
alert(1);
});
});
</script>
your HTML stays the same
try this
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#new_div").click(function(){
alert(1);
});
});
</script>
</head>
<body>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
</body>
</html>
I would like to add this code:
<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1134414-uqmj2UXxEw-v2">
</script>
<noscript>
<a href="http://www.formstack.com/forms/CampusEnterprises-chopped_greens_order_form__copy" title="Online Form">
Online Form - Chopped Greens Order Form - COPY
</a>
</noscript>
into the call of the isOpen() method at the end of the following javascript code:
<head>
<script type="text/javascript">
var theDate = new Date();
var dayOfWeek = theDate.getUTCDay();
// Returns true if the restaurant is open
function isOpen()
{
//I'll fill this in later, for now, return true
return true;
}
</script>
</head><body>
<script type = "text/javascript">
if(isOpen())
{
//ADD CODE HERE
}
</script>
</body>
However, when I try to just copy and paste the two together it doesn't work. I think it has something to do with nested tags but I'm not sure
You can write out the script into the document dynamically.
<body>
<script type = "text/javascript">
if(isOpen())
{
document.write('<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1134414-uqmj2UXxEw-v2"></script>');
}
</script>
<noscript>
<a href="http://www.formstack.com/forms/CampusEnterprises-chopped_greens_order_form__copy" title="Online Form">
Online Form - Chopped Greens Order Form - COPY
</a>
</noscript>
</body>
As #Jared Farrish noted in the comments, you might as well use the noscript tag directly on the page.
As a jquery-beginner, i should bind a javascript object into my jquery functions, like:
<div title="StackOverflow" onclick="javascript:action(this)">Content</div>
and in action i will handle the "this" :
function action(instance){
example=instance.attr("title");
}
but the "instance" is not a jquery object so i can't work with it. The syntax
example=$(instance).attr("title");
doesn't help me either.
I'd be glad of any suggestions
If you're using jQuery then you should completely separate the definition of your HTML and associated JavaScript. For example
HTML:
<div id="soDiv" title="StackOverflow">Content</div>
JavaScript:
$(document).ready(function() {
$('#soDiv').click(function() {
var example = $(this).attr('title');
...
});
});
this should work...
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function action(instance){
example=$(instance).attr("title");
alert(example);
}
</script>
</head>
<body>
<a id="test" title="StackOverflow" onclick="javascript:action(this)" href="#">Content</a>
</body>
</html>
// HTML file
<div title="StackOverflow" id="stackoverflow">Content</div>
// JS File
document.getElementById("stackoverflow").addEventListener("click", function () {
var example = this.getAttribute("title");
});
Seperations of concerns
HTML:
<div title="StackOverflow" id="stack">Content</div>
Javascript (with jQuery):
$('#stack').click(function(){
alert(this.title);
});