Stuck with simple calculation from form elements - javascript

I'm using a script template to create chunks of code when a user clicks a button, this works fine, but I want to be able to calculate a total within these cloned regions so I have a in-line onBlur statement as follows
onblur = "multiply.call(this, this.form.elements.Qty{{ID}}.value, this.form.elements.Cost{{ID}}.value, this.form.elements.Total{{ID}})"
As the cloning function updates ID to a value this evaluates to
onblur = "multiply.call(this, this.form.elements.Qty1.value, this.form.elements.Cost1.value, this.form.elements.Total1)"
My function is
function multiply(one, two, three) {
console.dir(three);
document.getElementById(three).value = (parseFloat(one) + parseFloat(two)).toFixed(2); // error here
};
If I display one and two they have the values from the form, however I get an error writing back to the for of Uncaught TypeError: Cannot set property 'value' of null.
The console shows the ID of the element three as Total1
I think this might be something to do with the jQuery clone and the DOM not being updated. The values are passed OK, but the object might not be.
Any ideas?

document.getElementById(three) returns no match (thus the undefined).
You're passing an element to your function multiply as parameter three, and you're later using it as a string representing the ID of it.
If three is verified to be an element, don't call document.getElementById(three).value in first place, but directly three.value.

Related

why does my global variable not carry its value between functions

At the top of my JavaScript document, which is linked to an HTML page, I declared:
var pizzaVar;
Then, I have a function later in the code that sets the variable's value and then calls another function:
function makePizza()
{
pizzaVar = document.getElementById("pizzaDiv").innerHTML;
givePizzaToppings();
}
But when I tried to use pizzaVar in the next function to set the innerHTML of pizzaDiv, nothing happened:
function givePizzaToppings()
{
var toppings = "<p>Onions and Bacon</p>";
pizzaVar = toppings;
}
However, if I changed the last line to
document.getElementById("pizzaDiv").innerHTML = toppings;
it worked. I don't want to have to put that in everytime I want to change pizzaDiv though, is there a way to fix this.
PS: I tried saying
var pizzaVar= document.getElementById("pizzaDiv").innerHTML;
outside of the functions but I got an error message saying:
TypeError: null is not an object(evaluating 'document.getElementById("pizzaDiv").innerHTML')
Your pizzaVar will point to a string value, which will be the HTML at the time of the assignment. It doesn't magically setup a link to change it.
If you wanted to use this global variable, you'd be better off pointing it to the div element and then using innerHTML every time you wanted to change its value.
Then you should research to understand why innerHTML is rarely the best tool to modify the DOM.
Unfortunately, whenever you want to change the .innerHtml of your pizza div, you're going to have to write document.getElementById("pizzaDiv").innerHTML on the left side of an equals sign. pizzaVar is not a pointer, and doesn't point to the .innerHtml of the div.
The error you got is telling you that document.getElementById("pizzaDiv") returned null and hence has no properties at all, much less an .innerHtml property. This is because it did not exist at the time of the .getElementById call.

Trouble selecting object ID with wildcard

I'm using multiple instances of jwplayer on my page that generate random keys onto the end of the player ID every time the page loads. Example: jwplayer_ad1_012 and on next refresh jwplayer_ad1_123.
I'm trying to select the player and make it play(I am aware of autoplay) by using the javascript $("object[id^='jwplayer_ad1_']").jwplayer().play(); and that's throwing up an error. I tried to assign $("object[id^='jwplayer_ad1_']") to a var and use testvar.jwplayer().play(); and that didn't work either as console says
Uncaught TypeError: $(...).jwplayer is not a function so i did window.alert(testvar); to make sure the var was being set and the alert just said [object Object]
Can I have some insight to what I'm doing wrong?
I don't believe jwplayer is a jQuery plugin, but you're trying to call it like one.
This page suggests that in order to use jwplayer, you call the jwplayer function and pass it the id of the element to use, or an index (0 = the first one).
So if you want to play the first one, simply:
jwplayer(0).play();
or (apparently 0 is the default):
jwplayer().play();
If you want one of the others, you can use a higher index.
If you wanted to do it by id instead, you could find the id:
var id = $("object[id^='jwplayer_ad1_']").attr("id");
...and then do this:
if (id) { // Did we find one (the above returns `undefined` if there weren't any)
jwplayer(id).play();
}
...but that's a very roundabout way.

Get the ID from an Element in BIRT-Designer

Can someone told me, how i get the value from an Element in BIRT-Report Designer?
I tried the follwing in a dynamic Text Element but it didn´t work
var e = reportContext.getDesignHandle().getElementByID(5514);
if(e > 13)
{
"bigger"
}
else
{
"smaller"
}
(5514) is the ID from a Data report Item.
It count a column in my dataset.
I also tried to get the value from this element by using:
reportContext.getDesignHandle().findElement("myElementId")
But also not working
Thanks for helping me!
Logging in the onFetch event and in fact anywhere in BIRT is definitely possible, we are using it frequently.
Probably your DS does not return any data or an exception occurs.
Add logging statements to the beforeOpen and afterOpen events, that will tell you if the query is executing at all (and you're able to log the actual DS parameter values using this.getInputParamaeterValue("param_Foo").
Quite often, you find that a parameter is null or uses a default value because you forgot to set the DS parameter bindings in the layout.
If the beforeOpen event runs, but not afterOpen, then the DB doesn't like your query.
If the afterOpen event runs, but not the onFetch, then your query returned zero rows.
Also, run your report as HTML to see if there's a JavaScript error (shown in red at the end of the output).

Default Value in drop down list not being selected

I have a drop down list [ Incident, Question, Problem, Task]. I have written a code when an end user logins in and has a tag called product the default value should be problem. However it does not seem to work. It still gives the user the option to select values from the list.
$j(document).ready(function() {
if(location.pathname == '/requests/new') {
var ct = currentUser.tags;
if(ct.indexOf("product") >= 0){
$j(document.getElementById("ticket_fields_75389").value = "Problem");
}
else {
$j(document.getElementById("ticket_fields_75389").value = "");
}
}
})
Note: This answer is incorrect. I will delete it once I know the OP read my comment.
It still gives the user the option to select values from the list.
Well, of course, setting value will only change the initially selected value. If you want "fix" the value of the select element, so that the user cannot change it, you have to make it read-only. Lets stick with jQuery (what you have is a weird mix of DOM API and jQuery †):
$j("#ticket_fields_75389").val("Problem").prop('readonly', true);
†: Let's have a close look at the line
$j(document.getElementById("ticket_fields_75389").value = "Problem");
What exactly is happening here? Obviously we have a function call ($j(...)) and we pass something to it. This "something" is the result of the expression
document.getElementById("ticket_fields_75389").value = "Problem"
This finds an element by ID and assigns the string "Problem" to the value property. This is an assignment expression. The result of an assignment expression is the assigned value, i.e. "Problem".
That is the value that is passed to $j(...), so we have $j("Problem");. Since $j refers to jQuery, this would search for all elements with tag name Problem, which does not exist in HTML. It would also return a jQuery object, but you are not doing anything with it.
Hence the wrapping in $j(...) is completely unnecessary or even wrong, even though it doesn't throw a syntax or runtime error.

Syntax error - how to get value of textbox

I have a trouble getting value from text box. Conventional javascript getElementByName returns error :undefined. I was able to use jQuery in other examples with select. But can't find a reference anywhere about input tags. This line shows syntax error:
var total = = $('input[name='+formQty+'] :text').val();
What is a jquery for picking value/text of a textbox?
you have 2 equal signs.
var total = $('input[name='+formQty+'] :text').val();
It might be easier also to stick an ID attribute on the input tag and use this
var total = $('#myInputId').val();
make sure you are calling it from a loaded dom:
$(function() {
var total = $('#myInputId').val();
});
From what I understand your query selector is incorrect.
It should be 'input[name='+formQty+']:text' the :text as you have it is trying to select any text elements underneath the current input resulting in nothing. You can even get rid of the :text and only select the element based on name. .val() should then work if you have properly selected the input element.
You should also debug this by just performing the $('...') method without the function call and see what elements are returned.
Regarding your problem getting this to work with getElementByName() - that's probably because the method is actually getElementsByName() - note the plural elementS. It returns a list of all elements with the specified name, accessible via array syntax; even if there is only one matching element you still get a list (with only one thing in it).
If you are sure there will be exactly one element with the specified name you can do this:
var elementValue = document.getElementsByName(name)[0].value;

Categories

Resources