<Script>
function getExperience()
{
var xp = document.getElementById('txt_XP').value;
document.getElementByID("plank").innerHTML = xp/30;
}
</Script>
So here is my code, and my problem is that I seem to be unable to write over data in a table with the id's planl, oakPlank, teakPlank, and mahoganyPlank. I am thinking that I may be making an obvious mistake to someone who has done this sort of thing before, but I can't seem to catch it. Any help is much appreciated, and here is a snippet of my table, if it helps:
<tr>
<td>Plank</td>
<td id="plankXP">30</td>
<td id="plank">0</td>
</tr>
EDIT: I didn't realize that this may be pertinent, my bad. This is the form I used to get input, which after putting an alert in to see if it could retrieve the XP, it functioned correctly:
<form name="experience" id="experience_frm" action="#">
Experience: <input type="text" name="XP" id="txt_XP"/>
<input type="submit" value="Go" onclick="getExperience();"/>
</form>
You have used the wrong document method. Javascript is case sensitive. You used:
document.getElementByID
for getting the id="plank" element. But you need to use:
document.getElementById
Notice the d (last character) change.
With this change, a simple example works for me:
http://jsfiddle.net/wqZAq/
Try This
<Script>
function getExperience()
{
var xp = document.getElementById('txt_XP').value;
var newxp = parseInt(xp);
var div = newxp/30;
document.getElementById("plank").innerHTML = div;
}
</Script>
<table>
<tr>
<td>Plank</td>
<td id="plankXP">30</td>
<td id="plank">0</td>
</tr>
</table>
<input type="text" id="txt_XP" name="txt_XP" />
<input type="button" onclick="getExperience();" />
Related
I have explored so many topics here but couldn't get answer yet. please help me to resolve my issue
I have created an html generator with different functions which giving me result in a textarea box. I want to export the textarea value into html file
<html>
<head>
<script type='text/javascript'>
function output() {
var lkpp = document['getElementsByName']('linkurl')[0]['value'];
var tpwa = document['getElementsByName']('imgrlink')[0]['value'];
var ttiwidget = document['getElementsByName']('widget.content')[0];
ttiwidget['value'] = ''+lkpp+''+tpwa+''
};
</script>
</head>
<body>
<div>
<table width="100%">
<tr>
<td width='40%'>
<label for='linkurl' >value1</label>
</td>
<td width='60%'>
<input type='text' name='linkurl' value='' size='40'>
</td>
</tr>
<tr>
<td width='40%'>
<label for='imgrlink' >Value2</label>
</td>
<td width='60%'>
<input type='text' name='imgrlink' value='' size='40'>
</td>
</tr>
</table>
<br>
<input value='Generate' type='button' onclick='javascript:output();' />
<br>
<textarea name="widget.content" onfocus="this.select()" onmouseover="this.focus()" onclick="this.focus();this.select()" readonly='readonly'></textarea>
</body>
</html>
I want to export/save the generated value into an HTML file.
Check this is my file
We need more info to give valid feedback. Precisely what is the roadblock?
Assuming the issue is getting the textarea content into a js variable: see this fiddle
You can get the value inside the Textarea with
document.getElementById('taGenerate').value;
After that, you can do whatever you want with it after that.
If you've made it that far, and your trouble is writing local fs: you will want to read this SO thread. Browser compatibility is going to be your biggest hurdle here.
I'm writing a javascript library and I need to make a javascript function which you can call to create a form (scheduler) on your webpage.
this is the html code of the form:
<form>
<table border="1" cellpadding="5">
<tr><td id="schedulename" colspan="10">Time Schedule</td></tr>
<tr>
<td width="50">hours</td>
<td></td>
<td width="50">minutes</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
<td>Sun</td>
</tr>
<tr>
<td width="50"><input type="text" id="hours" maxlength="2" size="1"></td>
<td width="2"> : </td>
<td width="50"><input type="text" id="minutes" maxlength="2" size="1"></td>
<td> <input type="checkbox" id="mon"></td>
<td> <input type="checkbox" id="tue"></td>
<td> <input type="checkbox" id="wed"></td>
<td> <input type="checkbox" id="thu"></td>
<td> <input type="checkbox" id="fri"></td>
<td> <input type="checkbox" id="sat"></td>
<td> <input type="checkbox" id="sun"></td>
</tr>
<tr>
<td colspan="10"> <input type="button" id="setbutton" value="Set schedule"></td>
</table>
</form>
my idea of the result is that a user only needs to create a div in his webpage, then in the javascript, call my function with the right parameters which in turn shows my predefined form. But I also need to add some functionality to the 'setbutton' it needs to write the data to an adres in my PLC (programmable logic controller)
what I want the function call to look like: showScheduler(id, adres);
id is the id of the division and adres is the adres in my programmable logic controller I need to write to.
What is the best way to write the form to my webpage from within a javascript function?
I hope u guys can understand but i'll gladly give you more explanation if needed.
You can do something like:
<div id="placeholder">
</div>
<script type="text/javascript">
function createForm(divId) {
var formHtml = "<form><table border='1' cellpadding='5'>...</table></form>";
document.getElementById(divId).innerHTML = formHtml;
}
</script>
And call for example createForm("placeholder") when you want.
It sounds like you are specifically wanting the user to ONLY have their html and a <script> tag that loads in your js file. You will need to require a specific id or custom css class to use as a selector. Then the html part for the user would simply look like:
<html>
...
<body>
...
<div id="customID"></div>
...
</body>
</html>
Then in your javascript file, you need to create your function to write in the content, and tie that function to an execution on window.load(). Something like:
$( //note, this causes execution when the dom is loaded, using jQuery's .ready()
function(){ showScheduler("customID"); }
);
function showScheduler(id)
{
var contents = '<form><table border="1" cellpadding="5">...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
$("#"+id).html(contents);
}
I'm not sure exactly what you're looking for regarding the adress part, but you could easily extend the showScheduler() function to include a second parameter for the adress value, and then stick that into the middle of the rest of the contents value. Something like:
function showScheduler(id, adress)
{
var contents = '<form><table border="1" cellpadding="5">...' + adress + '...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
$("#"+id).html(contents);
}
And further, if you prefer to have the user call the function from their page, you can skip the part about tying this to this to the dom's execution (i.e. remove the $( function(){ showScheduler("customID"); } ); part completely
I have this code that is not working. I am trying to multiply 2 textboxs and show the solution, but it doesn't show anything when I click. The code I have so far is this... what can be wrong with the code below?
<script type="text/javascript">
$('#AddProduct').click(function() {
var totalPrice = $('#debt').val() * $('#income').val();
$('#solution').val() = totalPrice;
});
</script>
<form name="form" method="post" action="">
<table>
<tr>
<td><input type="text" name="income" id="income" /></td>
<td><input type="text" name="debt" id="debt" /></td>
<td><input type="text" id="solution" name="solution" /> </td>
</tr>
</table>
</form>
Your jQuery needs to be:
$('#AddProduct').click(function() {
var totalPrice = parseInt($('#debt').val()) * parseInt($('#income').val()); // you can't multiply strings
$('#solution').val(totalPrice); // This is how you use .val() to set the value.
});
This is the way that you'd set the value of the solution textbox:
$('#solution').val(totalPrice);
Also, do you actually have an element with an id of 'AddProduct' on your page?
var totalPrice = $('#debt').val() * $('#income').val();
$('#solution').val(totalPrice);
Demo
After, you add jquery to your page as below
<script src="http://code.jquery.com/jquery-latest.js"></script>
you can do the following:
$('#AddProduct').click(function() {
var totalPrice = parseInt($('#debt').val(),10) * parseInt($('#income').val(),10);
$('#solution').val(totalPrice);
});
You have to tell it you want the value of the input you are targeting.
And also, always provide the second argument (radix) to parseInt. It tries to be too clever and autodetect it if not provided and can lead to unexpected results.
Providing 10 assumes you are wanting a base 10 number.
I'm looking for a way to send some hidden form-data to a Django-server, which works out fine as long is a keep the javascript and the html(template) in the same file, but now i'm trying to separate them.
Probably really simple, but i guess all i have to do is get(set?) the 'name' of the window/html-and access it from the javascript module?
HTML:
<html>
<head>
<script src="/media/postIt.js"></script>
</head>
<body>
<form action="" method="post" id="postForm">{% csrf_token %}
<input type="hidden" id="scoreField1" name="score1"></input>
<input type="hidden" id="scoreFieldSet1" name="score1Set"></input>
<input type="hidden" id="scoreField2" name="score2"></input>
<input type="hidden" id="scoreFieldSet2" name="score2Set"></input>
<input type="hidden" id="scoreField3" name="score3"></input>
<input type="hidden" id="scoreFieldSet3" name="score3Set"></input>
</form>
<table>
<tr>
<td id="bg1" onclick="postIt('score1')">
Ones
</td>
<td id="bg1_1">
</td>
</tr>
<tr>
<td id="bg2" onclick="postIt('score2')">
Twos
</td>
<td id="bg2_1">
</td>
</tr>
</table>
Javascript:
function postIt(x){
var pointArray = [d1,d2,d3,d4,d5];
var totVal = d1+d2+d3+d4+d5;
pointArray.sort(function(a,b){return a-b});
alert(pointArray);
alert("total value: " + totVal);
if(x == "score2"){
if("{{ res.score2Set }}" == 0){
var form = document.getElementById('postForm');
document.getElementById('scoreField1').value = score1;
document.getElementById('scoreFieldSet1').value = score1Set;
document.getElementById('scoreField2').value = score;
document.getElementById('scoreFieldSet2').value = 1;
document.getElementById('scoreField3').value = score3;
document.getElementById('scoreFieldSet3').value = score3Set;
form.submit();
}
}
Edit:
Clarifying:
I can't reach the elements in the html 'document' by just calling document.getElement... since they now are in different documents (physically..). I guess i'll have to assign a name/variable to the document, somehow.
And the call it like:
nameOfDocument.getElement..
and so on..
I would guess that the line
if("{{ res.score2Set }}" == 0)
is the problem - an included Javascript file will not go through the Django template loader, so you cannot place variables inside it. This conditional will always evaluate to false.
You need to set the variable in the template file in some manner and then retrieve it in the Javascript. The best way to do this would be probably be to add res.score2Set as an additional argument to the postIt() function, and then do:
<td id="bg1" onclick="postIt('score2', '{{ res.score2Set }}')">
Although obviously I don't really know what your application does so this might not be applicable. If res.score2Set is used elsewhere in the HTML it might be better to load it in from the DOM in the Javascript.
Your assumption about javascript is wrong.Wherever you write JS codes (inline,within file,external file) all JS codes will have access to the DOM.So, the problem is you have not loaded your JS file properly.
I'm trying to make more than one <td> field visible or invisible on my screen based on user input and element class. I'm using jquery, html, and javascript.
Basically, I have an HTML table with different fields. I want these fields to have a class of either "Visible", "Visible and Required", or "Invisible". When the user selects an option, it changes the class of that element by removing the previous one and adding the new one. The onload default of these fields should be invisible.
HTML:
<body onload="ShowTheScreen()">
<table border="1">
<tr>
<td class="ReasonCode" align="center">
<span class="FieldLabel">Reason Code</span>
</td>
<td class="CostCenter" align="center">
<span class="FieldLabel">Cost Center</span>
</td>
</tr>
<tr>
<td class="ReasonCode" align="center">
<input type="text" id="ReasonCode" name="ReasonCode" value="1243">
</td>
<td class="CostCenter" align="center">
<input type="text" id="CostCenter" name="CostCenter" value="00123">
</td>
</tr>
</table>
<input type="button" value="MakeVis" onclick="PopulateTable()">
</body>
Javascript:
function ShowTheScreen(){
ToggleFieldVisibility(".ReasonCode", 3);
ToggleFieldVisibility(".CostCenter", 3);
DisplayFields();
}
function PopulateTable(){
ToggleFieldVisibility(".ReasonCode", 2);
ToggleFieldVisibility(".CostCenter", 1);
DisplayFields();
}
function ToggleFieldVisibility(element, x){
switch(x){
case 1:
$(element).removeClass("Invisible Required").addClass("Visible");
break;
case 2:
$(element).removeClass("Invisible").addClass("Visible Required");
break;
case 3:
$(element).removeClass("Visible Required").addClass("Invisible");
break;
default:
$(element).removeClass("Visible Required").addClass("Invisible");
break;
}
DisplayFields();
}
function DisplayFields(){
$(".Invisible").css({"visibility":"hidden"});
$(".Visible").css({"visibility":"visible"});
}
The problem I'm having is this: When I open the page, the fields get the "Invisible" class added to them as they should be and they become hidden. But when I try and remove the invisible class later and add the visible class, the invisible class is never removed and the visible class is never added: the elements simply retain the classes they had at first, and therefore stay hidden.
I saw previous threads relating to problems with jquery add/removeClass, but none that seemed to help me out. Let me know if you need more info.
UPDATE 1: Thanks for all the replies, everyone! Unfortunately, and I thought this would happen, the code I posted here is a far simplified version of the code I actually have and most of the answers I've received seem to be related to the syntax posted--like the issue with the quotes. I've updated the code to better reflect what I'm really doing. Hopefully this will narrow down what the issue is.
UPDATE 2: I know what I was doing wrong. In my code I have shown here I'm calling ToggleFieldVisibility(".ReasonCode", 2), which works fine. But in my actual code, I was retrieving the number 2 from a SQL call using an outside application, and it was returning it as a string. The "2" would get compared to 2 in the switch (or "1" to 1 and "3" to 3) and always go to default, so that's why those fields always came up invisible. Hah!
I think the problem lies in your inline onClick handlers. As you currently have them, you are using quotation marks as both attribute delimiters and to wrap your strings; this is going to cause your attribute to be truncated as ToggleFieldVisibility(" and your function will not run.
Try:
<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)">
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)">
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)">
If you need to use "s for some reason, you can always escape them with a \: (\".ReasonCode\"...
A quick guess, in calling the DisplayFields() function at the end, it adds css to the element in the form of an inline style tag. Try running a .removeAttr("style") right after doing the removeClass()
The code:
jquery:
function ToggleFieldVisibility(element, x){
//alert("Hello");
switch(x){
case 1:
$(element).removeClass("Invisible Required").removeAttr("style").addClass("Visible");
break;
case 2:
$(element).removeClass("Invisible").removeAttr("style").addClass("Visible Required");
break;
case 3:
$(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
break;
default:
$(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
break;
}
DisplayFields();
}
function DisplayFields(){
$(".Invisible").css({"visibility":"hidden"});
$(".Visible").css({"visibility":"visible"});
}
html:
<body onload="ToggleFieldVisibility('.ReasonCode .CostCenter', 3)">
<table border="1">
<tr>
<td class="ReasonCode" align="center">
<span class="FieldLabel">Reason Code</span>
</td>
<td class="CostCenter" align="center">
<span class="FieldLabel">Cost Center</span>
</td>
</tr>
<tr>
<td class="ReasonCode" align="center">
<input type="text" id="ReasonCode" name="ReasonCode" value="1243">
</td>
<td class="CostCenter" align="center">
<input type="text" id="CostCenter" name="CostCenter" value="00123">
</td>
</tr>
</table>
<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)" />
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)" />
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)" />
</body>