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.
Related
I need to make a quick webpage where a table is supposed to show with form boxes that allow you to enter data into the table. When a button is pressed, some javascript runs and a new row is added to the table, containing all of the information that was entered. I want to be able to enter this row at the bottom of the table every time I hit the button. But, to do this, I need to get ahold of the index of the last table row. Then, I need to be able to save that index somewhere on my webpage, so that if there is a refresh, the index is still there. Also, on refresh, I need to be able to view all of the data I had entered on the table using the javascript. How do I do this?
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
<tr>
<td>Question Number</td>
<td>Question Subject</td>
<td>Answer</td>
<td>Picture</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var questionIndexNumber = row.insertCell
}
</script>
</body>
</html>
EDIT: I didn't post any code before just because i was doing research as to how i was going to get the project done. this is what i have so far.
Also, I forgot to add. Is there a way to be able to do it so that I can go to another computer and see the same stuff on the webpage?
You can use this to save a value to localstorage.
localStorage.setItem("xyz","hellooo")
and to retrieve
localStorage.getItem("xyz")
You will not lose the value if you refresh.
this is my first question on Stack Overflow, I'm new to Javascript (have been teaching myself Python to get a feel for coding) and thought I'd try my hand at a simple web app to see how easy it is to translate my knowledge of Python into Javascript.
Basically the app will let you know when your favourite fruit etc is in season. So I have a list of checkboxes on one page 'fruitpicker.html' and corresponding images on another 'seasonalguide.html' (The images are just pictures of a calendar with the fruits season shaded etc).
I have a cookie that persists the checkbox state and a piece of external JS that toggles image visibility depending on the state of its corresponding checkbox.
Most of the cookie someone else was using on the web, so it works great, however the image vis JS is giving me trouble.
I've written what I think it should be but it didn't work and no matter how much I tinker around with it, nothing happens.
I'm sure it's something really dumb but anyway, here's the code...
The broken image vis JS:
function toggleVisibility(checkId, imageId) {
var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);
if (checkEl.checked) {
imgEl.style.visibility="hidden";
imgEl.style.display="none";
}
else {
imgEl.style.visibility="visible";
imgEl.style.display="inline-block";
}
}
By the way, if the line: var checkEl = document.getElementById(checkId);
is deleted the code works but image state doesn't persist. This is as far as I have gotten.
A few of the checkboxes in fruitpicker.html:
<html>
<head>
<title>Fruit Picker</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body onload="restorePersistedCheckBoxes();">
<label for= "chklogo">Braeburn</label>
<input type= "checkbox"
id= "chkBraeburn"
onChange= "toggleVisibility('braeburnItem');
toggleVisibility('braeburnSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Fuji</label>
<input type= "checkbox"
id= "chkFuji"
onChange= "toggleVisibility('fujiItem');
toggleVisibility('fujiSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Golden Delicious</label>
<input type= "checkbox"
id= "chkgolldenDelicious"
onChange= "toggleVisibility('goldenDeliciousItem');
toggleVisibility('goldenDeliciousSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Granny Smith</label>
<input type= "checkbox"
id= "chkGrannySmith"
onChange= "toggleVisibility('grannySmithItem');
toggleVisibility('grannySmithSeason');
persistCheckBox(this);"/><br/>
</body>
</html>
And here is the Seasonal Guide page:
<html>
<head>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="imageVisibility.js"></script>
</head>
<body>
<img id="imgGuide"
src="Images/Calendar/calendarHeader.png"
align="left"/>
<img id="braeburnItem"
src="Images/Produce/Fruit/BraeburnApple.png"
style="float:left; display:none;" />
<img id="braeburnSeason"
float="top"
src="Images/InSeason/InSeasonApr.png"
align="left"
style="display:none"/>
<img id="fujiItem"
src="Images/Produce/Fruit/FujiApple.png"
style="float:left; display:none;" />
<img id="fujiSeason"
float="top"
src="Images/InSeason/InSeasonMar.png"
align="left"
style="display:none;"/>
<img id="goldenDeliciousItem"
src="Images/Produce/Fruit/GoldenDeliciousApple.png"
style="float:left; display:none;"/>
<img id="goldenDeliciousSeason"
src="Images/InSeason/InSeasonFeb.png"
align="left"
style="display:none;"/>
<img id="grannySmithItem"
src="Images/Produce/Fruit/GrannySmithApple.png"
style="float:left; display:none;"/>
<img id="grannySmithSeason"
src="Images/InSeason/InSeasonApr.png"
align="left"
style="display:none;"/><br>
<table width="170px" height="70px">
<tr>
<td>
<a href="Main.html" id="back" title="about" class="button">
<img src="Images/Buttons/backButton.png" align="right">
</td>
</tr>
</table>
</body>
</html>
The question was getting long so I didn't include the cookie, but I can if it's useful.
Any help is appreciated, Thanks
I'm noticing two issues here.
First off, you're using two separate pages, but document.getElementById can only access the elements of the page you're on. So, your lines:
var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);
have to fail, because they are trying to access elements in the two pages. Whichever page you're running the script on, one of those lines will return null. Your question doesn't describe how the two separate HTML files relate to each other, so I can't help you fix this (Does the first load the second whenever a checkbox is clicked, or are the two pages loaded in frames or iframes of a parent page?).
The second issue is that your toggleVisibility function is defined with two parameters, but your code (for example):
onChange= "toggleVisibility('grannySmithItem');
toggleVisibility('grannySmithSeason');
calls the method (twice) with only one parameter. If we're talking about the same function (you might have a different function definition on each of the two pages), then the function can never identify the correct image, because the imageId is never supplied.
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.
I am a bit new to javascript/web programming and I've been having some issues that should probably have simple solutions but that I am having an extreme amount of trouble with. I basically just want to drag text from a cell in one table to a cell in another table. My questions are as follows:
I cannot seem to make anything but an (a href) type link drag and drop. If I try to set the draggable=true option on a div it remains undraggable (in firefox). In my searches, I haven't really seen any fixes for firefox ( i have added css rules for webkit, however).
To work around this, I was trying to drag an (a href) -apologies for parentheses, there is a limit on the amount of link tags i can use - item from one table's cell to a text input field in another table's cell and its default action is to just drag the link. What I'd like it to drag would be the contents of the tag (e.g. for Some Text I'd like it to return "Some Text" or "draggable" or any other customizable text). I have tried handling this in the ondragstart/ondrop events through e.datatransfer.setData("Text", "My Custom Text") and e.datatransfer.getData("Text") however I still receive the same results. Would anybody have any suggestions for this? I have been looking at this for a while and cannot figure it out at all.
Thank you very much in advance for your help.
EDIT: I do not have access to the computer I was using atm but I'll try to get the basic gist of what I was doing across..
onDrop(e){ //onDrop is assigned to the drophandler of a text input field
var text = e.dataTransfer.getData('Text');
this.Text = text;
e.preventDefault();
}
onDragOver(e){
e.preventDefault();
}
onDragStart(e){
e.dataTransfer.setData('Text', 'My String');
}
....
<table>
<tr>
<td><a id="ident" href="#" draggable="true">Text Content</a></td>
</tr>
<table>
<table>
<tr>
<td><input ondrop="onDrop(e)" type="text" /></td>
</tr>
<table>
Here's a complete code sample I did that works, based on your skeleton above:
<html>
<head>
<title>drag and drop example</title>
<script type="text/javascript">
function onDrop(e){
e.preventDefault();
var text = e.dataTransfer.getData("text/plain");
var input = document.getElementById("destination");
input.value = text;
}
function onDragOver(e){
e.preventDefault();
}
function onDragStart(e){
e.dataTransfer.setData("text/plain", event.target.textContent);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<span id="ident" draggable="true" ondragstart="onDragStart(event)">Text Content</span>
</td>
</tr>
<table>
<table>
<tr>
<td>
<input id="destination" ondragover="onDragOver(event)" ondrop="onDrop(event)" type="text" />
</td>
</tr>
<table>
</body>
</html>
Several things to note:
The format you pass to setData and getData needs to be "text/plain" not "Text" (see: http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-getdata)
You needed to actually call OnDragOver and OnDragStart (perhaps this was just missing from the sample you added from memory)
It would be good to give your input element an ID, as I did, so you can change the value to the dragged item
To read more about this topic, I wrote a blog you may find helpful: A Drag and Drop Planning Board with HTML5
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.