Can't grab value from hidden element - javascript

For some reason I get a javascript on the following code:
var teamOne = "";
var teamTwo = "";
var children = $(this).find(".team-url");
if (children.length === 2) {
teamOne = children[0].val();
teamTwo = children[1].val();
}
alert(teamOne + " - " + teamTwo);
The error is on .val() The code finds 2 elements and then it can't take the value. If I remove .val() I get it saying it is an [Object HTMLInputElement]
The error is
Uncaught TypeError: children[0].val is not a function
Note:
I Know that I can get this code to work by doing the following:
var teamOne = "";
var teamTwo = "";
var children = $(this).find(".team-url");
if (children.length === 2) {
teamOne = children.first().val();
teamTwo = children.last().val();
}
alert(teamOne + " - " + teamTwo);
However, I am trying to understand why my first version doesn't work so that I can have a better understanding of these functions.
EDIT:
HTML
<div class="col-md-12 game" style="margin-top: 10px">
<div class="team-details">Team Saturn
<input type="hidden" class="team-url" value="TeamSaturn">
</div>
<div class="team-details">Team Datarnan
<input type="hidden" class="team-url" value="TeamDatarnan">
</div>
</div>

Try this:
HTML
<input type="hidden" value="value 1" class="team-url" />
<input type="hidden" value="value 2" class="team-url" />
JS
var teamOne = "";
var teamTwo = "";
var children = $('body').find(".team-url");
if (children.length === 2) {
debugger;
teamOne = children[0].value;
teamTwo = children[1].value;
}
alert(teamOne + " - " + teamTwo);
In your code "$(this)" is not in the real context, and I have changed it with a global search in "body".
The JSFiddle

There is no function val on a HTMLInputElement Object. As children[0] is not a jQuery element you can not use the jQuery function val on it. But you can use the native javascript for this:
You can use teamOne = children[0].value;

First thing is that children[0] returns the DOM element not jQuery object, so you need to use children[0].value instead. To get a jQuery object, you should use .eq(0), .first(), .last() etc.
Second is that $(this).find() has no context. You could use either $('body').find(".team-url") or just $(".team-url")

Related

Uncaught TypeError: Cannot set property 'innerHTML' of null error

I got error of Uncaught TypeError: Cannot set property 'innerHTML' of null for below script.
I added the script tags after the body. But still I get the error.
I want to show the text boxes in the same page within the div with the ID showTextBoxes.
Below is the HTML and JS.
function showArray(){
var numofArr = document.getElementById("numofArr").value;
for (let i = 0; i < numofArr; i++) {
var a = document.writeln('<input type="text" name="Fname"><br/><br/>');
document.getElementById('showTextBoxes').innerHTML = a;
}
document.writeln('<input type="submit" name="submit">');
}
<p>Number of arrays(array within 0-9)</p>
<input type="text" id="numofArr" pattern="[0-9]">
<input type="submit" onclick="showArray()" value="Submit"><br><br>
<div id="showTextBoxes"></div>
Actually document.write()and document.writeln() works in a different ways you think.
It actually clears all the document in your case you you are getting null.
See this
If you wanna add some element to your body you can use document.body.innerHTML += string.appendChild() can also be used but its not for stings
function showArray(){
var numofArr = parseInt(document.getElementById("numofArr").value);
for (let i = 0; i < numofArr; i++) {
var a = '<input type="text" name="Fname" /><br/><br/>'
document.getElementById('showTextBoxes').innerHTML += a;
}
document.body.innerHTML += '<input type="submit" name="submit"/>'
}
<body>
<p>Number of arrays(array within 0-9)</p>
<input type="text" id="numofArr" pattern="[0-9]">
<input type="submit" onclick="showArray()" value="Submit"><br><br>
<div id="showTextBoxes"></div>
I think there are several ways, but I would recommend looking at append. Something like this should work:
function showArray(){
var numofArr = document.getElementById("numofArr").value;
for (let i = 0; i < numofArr; i++) {
var textBox = document.createElement("input");
var enter = document.createElement("br");
document.getElementById('showTextBoxes').append( textBox );
document.getElementById('showTextBoxes').append( enter );
}
}
There are various places in your script which prevent it from running correctly. I'll address them step by step so you can follow along.
First of all, you should avoid inline event handlers in your HTML for the same reasons you should avoid inline style declarations. So don't use onclick=" ... " inside your HTML and instead add eventlisteners in your JS. This also gives you the ability to cancel the default behaviour or stop event propagation and such things.
Next thing is, you try to use the value of your numofArr input as upper bounds for your loop without casting it to a Number. Because <input> elements return their value as a String, this is very likely to fail. Besides, you should use the type="number" attribute instead of type="text" on that element. It's not required to do so, but just good measure.
OK, now for the showArray function:
Instead of using document.writeln (or document.write), create elements with document.createElement and add them to the DOM with appendChild.
You can see a working example below. Don't be confused by the byId and makeEl functions, they are just utilities so you don't have to write document.getElementById and document.createElement all the time.
// ====== UTILITY FUNCTIONS ======
function byId (id, root = document) {
return root.getElementById(id);
}
function makeEl (tag) {
return document.createElement(tag);
}
// ====== PROGRAM STUFF ======
function showArray (e) {
e.preventDefault();
let numofArr = parseInt(byId('numofArr').value, 10);
let output = byId('showTextBoxes');
for (let i = 0; i < numofArr; i++) {
let textIn = makeEl('input');
textIn.type = 'text';
textIn.name = 'Fname';
output.appendChild(textIn);
output.appendChild(makeEl('br'));
output.appendChild(makeEl('br'));
}
let submit2 = makeEl('input');
submit2.type = 'submit';
submit2.value = 'Submit';
document.body.appendChild(submit2);
}
byId('submit1').addEventListener('click', showArray, false);
<p>Number of arrays(array within 0-9)</p>
<input type="number" id="numofArr">
<input id="submit1" type="submit" value="Submit"><br><br>
<div id="showTextBoxes"></div>

Function variables don't work in jQuery?

Im making a jquery function, but im getting trouble with some variables. I cant get the value of #op1 to the input and in #z1 it shows "i" instead of "Start. Also the counter parameter doesnt add up. It only shows "0". In the click event it gets added up.
javascript code:
$(function() {
$(function () {
var inpreco = [];
var altpreco = [];
var cpcounter9 = 0;
$(".opcaopreco").click(function () {
SuperF(this, "#preco", "inpreco", "altpreco", "cpvalor", "cpindex",
"cpactive", "cpcounter9", "preco");
});
function SuperF(element, input, inpArray, secArray, inpValue, secIndex,
inpActive,
counter, msqlip) {
var inpValue = $("#" + element.id).val();
var secIndex = $("#" + element.id).data(secIndex);
var inpActive = $("#" + element.id).data(inpActive);
if (inpArray[0] == "") {
counter++;
$("#" + element.id + "l").addClass("activa");
$(element).data(inpActive, "primary");
inpArray[0] = (inpValue);
input.val(inpArray[0]);
}
$("#z1").html(inpArray[0]);
$("#z2").html(counter);
$("#z3").html(cpcounter9);
};
});
});
html code:
<input id="preco" type="text" name="preco" value=''><br><br>
<div id="op1l" class="input">
<input type="checkbox" id="op1" class="opcaopreco" value="Start" data-cpindex="1" data-cpactivo="">
<label for="op1"></label>
<span class="itext">Test</span>
</div>
<ul id="z">
<li id="z1">z1</li>
<li id="z2">z2</li>
<li id="z3">z3</li>
</ul>
You're passing in strings for your parameters, not elements. So when you index that parameter you're getting the first character in the string.
You need to use the strings as selectors to get their associated elements and then pass their return values into your function:
// use the strings to make a selection
var preco = $('#preco');
var inpreco = $('inpreco');
// etc.
// pass the results of each selection into your function
SuperF(this, preco, inpreco, ...)
You can do this inline as well:
SuperF(this, $("#preco"), $("inpreco"), ...)
Similarly, you have other variables you're trying to pass as strings, rather than passing them by name like this:
SuperF(this, $('#preco'), inpreco, altpreco, cpvalor, cpindex, cpactive, cpcounter9, preco);
That is the reason your function can't access most of the parameters and why your counter remains at 0.

Can i call another function inside the GetElement in Javascript

I am trying to call another function inside the getElement but it is not working everything when i change my selection. When i select Car, in the textbox my varxumb should populate. Any idea...
document.getElementById("mycall1").insertRow(-1).innerHTML = '<td><select id = "forcx" onchange="fillgap()"><option>Select</option><option>Force</option><option>Angle</option><option>Area</option></select></td>';
function fillgap() {
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
if (forcxlist == "Force") {
document.getElementById("result1").value = xnumb;
}
}
I don't know how this "Force" value is coming to check.
you can try these solutions.
if (forcxlist == "Force")
instead use
var forcxlistText = forcxlist.options[forcxlist.selectedIndex].text;
if (forcxlistText == "Force")
or use value technique
<div id ="mycall1">
</div>
<div id ="result1">
</div>
<script>
document.getElementById("mycall1").innerHTML = '<td><select id = "forcx" onchange="fillgap(this.value)"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';
function fillgap(value){
var xnumb = 20;
if (value == "2"){
document.getElementById("result1").innerHTML = xnumb;
}
}
</script>
or use
<div id ="mycall1">
</div>
<input type="text" id="result1" value=""/>
<script>
document.getElementById("mycall1").innerHTML = '<td><select id = "forcx"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';
document.getElementById("forcx").onchange = function (){
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
var forcxlistValue = forcxlist.options[forcxlist.selectedIndex].value;
if (forcxlistValue == "2"){
document.getElementById("result1").value = xnumb;
}
}
</script>
The forcxlist variable is an element object, returned by the document.getElementById method. Afterwards, you are checking if this element object is equal to "Force", which is a string (meaning the contents of your if block will never be executed). Did you mean to check if the contents of that object are equal to Force?
Instead of
if (forcxlist == "Force"){
use
if (forcxlist.innerHTML == "Force"){
I hope this helps!
Can't use innerHTML so i changed it to .value
document.getElementById("result1").value = xnumb;
There are a couple issues here.
First, you are expecting forcxlist to be a string, not an element, so you need to use .value to get the selected value of the dropdown.
Second, you should do your comparison with === not ==, as this ensures type equality as well, and is best practice.
I would also recommend building your select using HTML elements. It keeps things cleaner, is more readable, and is easier to maintain.
Since you are using the same id for the select, you would have to change the selector in your fillgap handler to var forcxlist = e.target.value;, this way the event will fire based on only the select that you are interacting with, regardless of how many rows you have in the table.
Updated code is below, and an updated working fiddle here. As per your comment about adding additional rows, the fiddle has this working as well.
<input type="button" value="Add Row" onclick="addDropDown()">
<table id="mycall1"></table>
<script>
function addDropDown() {
var tbl = document.getElementById("mycall1");
var newRow = tbl.insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.appendChild(createDropDown("forcx", fillgap));
}
function createDropDown(id, onchange) {
var dd = document.createElement('select');
dd.id = id;
dd.onchange = onchange;
createOption("Select", dd);
createOption("Force", dd);
createOption("Angle", dd);
createOption("Area", dd);
return dd;
}
function createOption(text, dropdown) {
var opt = document.createElement("option");
opt.text = text;
dropdown.add(opt);
}
function fillgap() {
var xnumb = 20;
var forcxlist = e.target.value;
if (forcxlist === "Force") {
document.getElementById("result1").value = xnumb;
}
}
</script>
<input type="text" id="result1">

Get value of span element and output it

Ok, I am more than impressed that you guys took your time to answer this, thank you so much, I did not expect it. Hope well follows you.
To explain my problem, I used that fiddle tool you all had. This is the code I have:
enter code here
http://jsfiddle.net/5xzSy/1/
-What I need, is to sum up the values that get calculated in the spans : budgetI + actualI
Modified your code to : Use .text() to populate the Span and assign some value to your inputs..(Since you have used jQuery)
http://jsfiddle.net/xubam99v/
HTML Code
<pre>
<input id=primaryB type="text" value="100"></input><input id=primaryA type="text" value="100"></input><span id=primary></span><br />
<input id=spouseB type="text" value="100"></input><input id=spouseA type="text" value="100"></input><span id=spouse></span><br />
Budget: <span id=budget></span> <br />
Actual: <span id=actual></span><br />
</pre>
Javascript/jQuery Code
var primaryBValue = parseFloat($('#primaryB').val());
var primaryAValue = parseFloat($('#primaryA').val());
$('#primary').html(primaryBValue + primaryAValue);
var spouseBValue = parseFloat($('#spouseB').val());
var spouseAValue = parseFloat($('#spouseA').val());
$('#spouse').html(spouseBValue + spouseAValue);
$('#budget').text(primaryBValue + spouseBValue);
$('#actual').text(primaryAValue + spouseAValue);
listen on the change-event to sum numbers after you insert then
http://jsfiddle.net/55c5uqhc/2/
$('#primaryB,#primaryA,#spouseB,#spouseA').change(calc);
function calc() {
var primaryBValue = parseFloat($('#primaryB').val());
var primaryAValue = parseFloat($('#primaryA').val());
$('#primary').html(primaryBValue + primaryAValue);
var spouseBValue = parseFloat($('#spouseB').val());
var spouseAValue = parseFloat($('#spouseA').val());
$('#spouse').html(spouseBValue + spouseAValue);
$('#budget').html(primaryBValue + spouseBValue);
$('#actual').html(primaryAValue + spouseAValue) ;
}
You need to create a trigger upon which you populate the <span>s, also use text() instead oh html()
Here's example(probably a bad one but it's good place to start):
function:
$('input').keyup(function(e){
var spouseBValue = parseFloat($('#spouseB').val());
var spouseAValue = parseFloat($('#spouseA').val());
var primaryBValue = parseFloat($('#primaryB').val());
var primaryAValue = parseFloat($('#primaryA').val());
$('#spouse').text(spouseBValue - (-spouseAValue));
$('#primary').text(primaryBValue - (-primaryAValue));
$('#budget').text(primaryBValue - (-spouseBValue));
$('#actual').text(primaryAValue - (-spouseAValue));
});
fiddle

How to get child element by ID in JavaScript?

I have following html:
<div id="note">
<textarea id="textid" class="textclass">Text</textarea>
</div>
How can I get textarea element? I can't use document.getElementById("textid") for it
I'm doing it like this now:
var note = document.getElementById("note");
var notetext = note.querySelector('#textid');
but it doesn't work in IE(8)
How else I can do it? jQuery is ok
Thanks
If jQuery is okay, you can use find(). It's basically equivalent to the way you are doing it right now.
$('#note').find('#textid');
You can also use jQuery selectors to basically achieve the same thing:
$('#note #textid');
Using these methods to get something that already has an ID is kind of strange, but I'm supplying these assuming it's not really how you plan on using it.
On a side note, you should know ID's should be unique in your webpage. If you plan on having multiple elements with the same "ID" consider using a specific class name.
Update 2020.03.10
It's a breeze to use native JS for this:
document.querySelector('#note #textid');
If you want to first find #note then #textid you have to check the first querySelector result. If it fails to match, chaining is no longer possible :(
var parent = document.querySelector('#note');
var child = parent ? parent.querySelector('#textid') : null;
Here is a pure JavaScript solution (without jQuery)
var _Utils = function ()
{
this.findChildById = function (element, childID, isSearchInnerDescendant) // isSearchInnerDescendant <= true for search in inner childern
{
var retElement = null;
var lstChildren = isSearchInnerDescendant ? Utils.getAllDescendant(element) : element.childNodes;
for (var i = 0; i < lstChildren.length; i++)
{
if (lstChildren[i].id == childID)
{
retElement = lstChildren[i];
break;
}
}
return retElement;
}
this.getAllDescendant = function (element, lstChildrenNodes)
{
lstChildrenNodes = lstChildrenNodes ? lstChildrenNodes : [];
var lstChildren = element.childNodes;
for (var i = 0; i < lstChildren.length; i++)
{
if (lstChildren[i].nodeType == 1) // 1 is 'ELEMENT_NODE'
{
lstChildrenNodes.push(lstChildren[i]);
lstChildrenNodes = Utils.getAllDescendant(lstChildren[i], lstChildrenNodes);
}
}
return lstChildrenNodes;
}
}
var Utils = new _Utils;
Example of use:
var myDiv = document.createElement("div");
myDiv.innerHTML = "<table id='tableToolbar'>" +
"<tr>" +
"<td>" +
"<div id='divIdToSearch'>" +
"</div>" +
"</td>" +
"</tr>" +
"</table>";
var divToSearch = Utils.findChildById(myDiv, "divIdToSearch", true);
(Dwell in atom)
<div id="note">
<textarea id="textid" class="textclass">Text</textarea>
</div>
<script type="text/javascript">
var note = document.getElementById('textid').value;
alert(note);
</script>
Using jQuery
$('#note textarea');
or just
$('#textid');
$(selectedDOM).find();
function looking for all dom objects inside the selected DOM.
i.e.
<div id="mainDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div id="innerDiv">
link
<p>Paragraph 3</p>
</div>
</div>
here if you write;
$("#mainDiv").find("p");
you will get tree p elements together. On the other side,
$("#mainDiv").children("p");
Function searching in the just children DOMs of the selected DOM object. So, by this code you will get just paragraph 1 and paragraph 2. It is so beneficial to prevent browser doing unnecessary progress.

Categories

Resources