JavaScript simple echo/print query - javascript

I know this is basic stuff, but after hours of research on google, this site and others I simply cannot come up with an explanation of why this code wouldnt work. And it doesnt. Can someone please spot the mistake? many thanks in advance:
The JavaScript bit:
<script language="text/JavaScript">
function myFunction() {
var date1;
date1=getElementByID("date1").value;
document.getElementByID("calculate").innerHTML=date1;
}
</script>
The HTML bit (that definitely works and its a rather large file with loads of forms, tables)
<html>
<head></head>
<body>
<div id="wrap">
<h2>JavaScript</h2>
<form>
<table>
<tr>
<th><input type=text id="date1" value="09:00" size=15></td></th></tr></table></form>
<table>
<tr>
<th bgcolor="#eeaaaa" align=center><em></em> <input type=button id=pay id="calculate" size=15 value="Click"></th></tr></table>
<table>
<tr>
<th><p id="calculate" size=15> </p></td></th></tr></table>
</div>
</body>
</html>
​
​
I tried different things already, changing the syntax, clearing the clutter out, but nothing seems to work.
I appreciate any constructive comments/criticism. Thanks

You have two ids id=pay id="calculate" for your second input ..id needs to be unique
<script language="text/javascript">
function myFunction() {
var date1;
date1=document.getElementById("date1").value;
document.getElementById("calculate").innerHTML=date1;
}
</script>
and most importantly ..you are not calling myFunction

#calculate (the element with id="calculate" ) is an input element. You don't set its value using innerHTML but value (like you did when reading the value in #date1.)
You may want to use an online HTML validator or at least a more powerful HTML editor to help you out with the code.

Related

Script is not running when added dynamically

{include file="head.tpl" title="Combate"}
{include file="navBar.tpl" dir=$dir}
<table id="CombatLister">
</table>
Nombre: <input type="text" id="nombrePJ">
AC <input type="number" id="ACPJ">
Iniciativa <input type="number" id="Init">
<button id="añadirParty" onclick="addPJButt()">Añadir</button>
<script>
function addPJButt(){
var name=document.getElementById("nombrePJ").value;
var ac=document.getElementById("ACPJ").value;
var iniciativa=parseInt(document.getElementById("Init").value);
addPJ(name,ac,iniciativa);
}
function addPJ(nombre,ac,init){
var table=document.getElementById("CombatLister");
var row=table.insertRow(0);
var cellNombre=row.insertCell(0);
var cellInit=row.insertCell(1);
var cellAc=row.insertCell(2);
cellNombre.innerHTML=nombre;
cellInit.innerHtml=init;
cellAc.innerHtml=ac;
}
</script>
<script>
{$x=0}
{foreach $party as $pj}
addPJ({$pj.nombre},{$pj.ac},{$pj.init})
{/foreach}
</script>
I have a smarty template that using an array from another page, adds it to the "CombatLister" table. however, for some reason, the addPJ() Script does not run. Im just learning the ropes of Javascript, so maybe im skipping something, but so far, i've got no answers on why it does not work.
I tried to check if the addPJ() script was wrong, using the addPJButt(), but the script is working: When i put data on the input types up there, they add the name correctly.
I dont think its a problem of Smarty. checking the source code of the page its similar, writting this where i call $pj:
<script>
addPJ(Galahad,14,5);
</script>
PS: As an extra problem, but not so important, on the insertCell methods of addPJ only the first cell is added.
addPJ(Galahad,14,5); is looking for an undefined variable Galahad.
you need to quote it so it gets printed as javascript string
Try
addPJ('{$pj.nombre}',{$pj.ac},{$pj.init})
Note: I haven't worked with smarty in years and assume the quotes will be literals

HTML and JavaScript Proof Writer

all, I asked a question about this program earlier, but I have a new problem. I'm trying to make a two-column proof writer, and I'm having trouble with some of the code. It's relatively simple stuff, but for some reason, nothing I have been trying has been working. The code is as follows:
<HTML>
<body>
<font size="5">
<p align="center">
<p1>Insert Given:</p1>
<div align="center"; id="Input1">
<form id='user-input'>
<input type='text' id='given' placeholder='Given Information'></input>
</form>
<p2>Insert Statement<br>to Prove:</p2>
<br>
<div align="center"; id="Input2">
<form id='user-input'>
<input type='text' id='prove' placeholder='Statement to Prove'></input>
</form>
<button id='Submit' Value='Edit' onClick="edit()">Submit</button>
<p id="demo"></p>
<script>
function edit()
{
var x = document.getElementById('given').value;
var y = document.getElementById('prove').value;
print x;
}
</script>
<br>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<col Width="15">
<col Width="300">
<col Width="500">
<tr>
<th>Step Number</th>
<th>Step</th>
<th>Explaination</th>
</tr>
<tr>
<td>1</td>
<td><var="x"></var></td>
<td>Given</td>
</table>
</div>
</body>
</html>
I want this to do a few things that it currently refuses to do. Firstly, I just want the onclick function edit() to show the value of x so that I can make sure that it is accepting the user's input. The other thing that I'm annoyed at is that I can't find a way to print this variable in the HTML based table below the function. If the user says for the given something like (Angle ABD is Bisected by Ray BC), for example, I want that to be displayed in the first row as the given statement and then I will work from there getting the code to check different postulates, theorems, etc. until the desired proof is created based off the user input of "Statement to Prove"
Sorry for my messy code and inexperience, I'm only a freshman in HS, so I haven't worked with JavaScript and HTML for terribly long.
I intend to do some "if...then" statements for the properties and postulates and such, saying for example if "previous step" is a statement of congruency (I'll check for formatting words) and "statement to prove" is a statement of equality, then (br or however you extend the table, (a) = (b) instead of (a) =~ (b)). If you know a better way of adapting this system that will save me a lot of time I'd be more than happy to take some tips.
Replace your 'print x' with 'console.log(x)' because I don't think print is a valid JS statement.
For outputting the data into your table, your probably looking at something like '.innerHTML'. To use that you would have to 'find' your DOM element (probably by giving it an ID) using 'document.getElementById('id')' then use '.innerHTML' on that to write stuff to the table.

Very simple javascript doesn't work at all [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.
My JavaScript in .php (static website) file doesn't work. I use there 3 other scripts and they do work, but not this one.
The situation is simple
The JavaScript is:
var myFile = document.getElementById('myFile');
myFile.addEventListener('change', function() {
alert(this.files[0].size);
});
and the HTML code in the PHP file is (stripped):
<form onsubmit="return anotherfunction();" action="sendForm.php" enctype="multipart/form-data" method="post">
<table>
<tr>
<td>Attach an image:</td>
<td> <input type="file" name="priloha[]" accept="image/*" /></td>
</tr>
</table>
</form>
And the JavaScript does nothing, it acts like it doesn't exist. I tried to use the JS in the header, below the header, in the body, in the TD of the input... I also tried using it in external .js file, nothing, doesn't work at all. I tried changing "change" to "click", didn't work neither. I tried to do this all day and I can't figure out what's wrong.
So I tried to do much simpler code to check what's wrong and it seems like change or onchange - the second line of the JS doesn't work.
I also tried to specify HTML5 doctype, doesn't do a thing.
My extra .html file to try even simpler code looks like this and of course doesn't work...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Input field for click popup:</td>
<td>
<script type="text/javascript">
var input = document.getElementById('input');
input.addEventListener('click', function() {
alert("Hello");
});
</script>
<input type="text" id="input" />
</td>
</tr>
<table>
</body>
</html>
Help me please, I don't really know what's this...
I forgot to mention, I tried different browsers - Opera 12.15, latest Firefox and Chrome, didn't work in any case. But it works in fiddle...
Put the script right at the end of the body, right before the </body> end tag.
Scripts are loaded synchronously where they are placed, so any script put in before the element in question will not be aware of the element's existence.
Also, what Igor said.
You don't have a DOM element with id "myFile" in html that you included.

writing html bean within JavaScript

hey Guys,
I am trying to write dynamic html bean using java script
but I keep geting the "function is not found" JS error when I press the button ..
here is a sample code
<html>
<html:form action="loginAction.do" >
<head>
<script type="text/javascript">
function test(){
document.getElementById('dd').innerHTML =
"<html:text property='pid'/>";
}
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
<input type="button" value="addprod" onclick="test()"/>
</td>
</tr>
<tr>
<td align="center">
<div id="dd"></div>
</td>
</tr>
</table>
</html:form>
</body>
</html>
I don't know about the
<html:form action="loginAction.do" >
where it should be located
I tried to locate it within the <body>
but I got a big exception due to writing <html:text property='pid'/> in JavaScript outside the <html:form>
...
need your help,
Regards,
I think struts is trying to parse the <html:text /> as a tag in your script, rather that just a javascript string. Try moving the <html:form action="loginAction.do" > into the body AND the <script> within the <html:form> similar to this fiddle http://www.jsfiddle.net/pL4Aq/1/
However, it works in the fiddle because it is just straight HTML... I don't think what you are trying to do will work. <html:text > is a custom tag that gets processed on the server, does a bunch of stuff, and then generates HTML for you. You will never actually see <html:text> if you view the source from your browser, even though it is in your jsp.
You might want to try changing the <html:text > to a straight <input type="text"> tag (in which case, you could just move the <html:form> into the body and leave the script where it is).
I am completely agreed with what Mike is saying.
Writing <html:text> inside javascript is useless since javascript is executing on client side while struts is required to translate this tag to html tag.
Better to write <input type="text"> inside javascript and keeps its name as "prop" if you want struts to fill the value of that text inside the form bean property "prop". Keep the <html:form in body tag. This will work for you.
It should work in a <body> tag.

jquery animation not showing up

$('#main-mission .fade').animate({opacity:1.0;filter:alpha(opacity=100);}, { queue:true, duration:2000 }).animate({opacity:1.0;filter:alpha(opacity=100);}, 1500).animate({opacity:0.0;filter:alpha(opacity=0);}, 800,'linear',function(){
$('#main-mission .fade').html("<font size='3'>... to organize and display the data that people need, to give them the ability to make smarter decisions and purchases that will help the environment, as well as reduce their monthly electricity costs.</font>"); }).animate({opacity:1.0;filter:alpha(opacity=100);}, 2000);
...thats my jquery,
<div id="main-mission">
<table><tr height="28"><td width="11"></td><td width="475" style="height: 75px;" class="boxed"><div class="fade" style="opacity:0.0;filter:alpha(opacity=0)"><font size="4"> The Spare Our Green Mission ...</font><br><br></div> </td></tr></table>
</div>
and that is the HTML. I'm not quite sure why it isn't, working... could someone please help?
Thanks.
You have used semi-colons where you should have used commas to separate the css attributes being animated. Also you don't need to try and add IE support with filter attribute. Try this code, tested in FF3.5 and IE8
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#main-mission .fade')
.animate({opacity:1.0}, {queue:true,duration:2000})
.animate({opacity:1.0}, 1500)
.animate({opacity:0.0}, 800,'linear',function()
{
$('#main-mission .fade').html("<font size='3'>... to organize and display the data that people need, to give them the ability to make smarter decisions and purchases that will help the environment, as well as reduce their monthly electricity costs.</font>");
})
.animate({opacity:1.0}, 2000);
});
</script>
</head>
<body>
<div id="main-mission">
<table>
<tr height="28">
<td width="11"></td>
<td width="475" style="height: 75px;" class="boxed">
<div class="fade" style="opacity:0.0;filter:alpha(opacity=0)">
<font size="4"> The Spare Our Green Mission ...</font>
<br>
<br>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Have you tried removing parts of the chain down to the first element and then adding them back in one at a time to see what is broken? It's a long function call to try and read and parse.
I think that the non numerical values should be in quotes like filter:"alpha(opacity=0)";.
What error message are you getting (from firebug, i.e.)?
-- edit
Btw. IE8 is using -ms-filter for opacity now.
I agree with Paddy. You should write a simpler version of your code and then try it out. Make only one call to $.animate(). Once you get that working, then add in the callback. Once that works, then add the chaining.
Also note that you should not use the <font> tag. It is not valid HTML.

Categories