Declared variable returns 'undefined' - javascript

I have tried everything I can think of to resolve the fact that my variable is returning 'undefined'.
I have gone console.log crazy checking everything is working as it should be and am now up against the proverbial brick wall.
The script is located just before the closing body tag.
I tried putting it in the head section of the page but this began returning NaN on the variables R and X.
Putting the variables just after the opening script tag before calling the function did likewise. I am somewhat new to javascript and would very much appreciate any help.
function DisplayInputValues() {
var funds = document.getElementById("funds").value;
var s = document.getElementById("sum").innerText;
var j = document.getElementById('debt').value; //number of input fields
var txtin; //class name of text input element
var numin; // class name of number input element
var L = 0;
while (L < j) {
console.log('funds= ' + funds); //just checking amount of funds shows correctly
console.log('debt = ' + s); //just checking Debt sum shows correctly
console.log('Loop = ' + L);
var userinput1 = document.getElementsByClassName('txtin')[L].value;
console.log('Loop = ' + L + ' Text input = ' + userinput1);
document.getElementById("showresults").innerHTML += userinput1 + "<br />";
var userinput2 = document.getElementsByClassName('numin')[L].value;
console.log('Loop = ' + L + ' Number input = ' + userinput2);
document.getElementById("showresults").innerHTML += userinput2 +
"<br/>" + 'Amount To Offer : ' + X + "<br />" + "<br />";
var FP = funds / 100; // 1% of funds available
var SP = s / 100; // 1% of debt total
var R = userinput2 / SP;
R = R.toFixed(2);
var X = FP * R;
X = X.toFixed(2); //amount to offer in settlement
console.log('Loop = ' + L + ' FP = ' + FP);
console.log('Loop = ' + L + ' SP = ' + SP);
console.log('Loop = ' + L + ' R = ' + R);
console.log('Loop = ' + L + ' X = ' + X);
console.log('Loop = ' + L + ' Amount to offer = ' + X);
console.log('');
L = L + 1;
}
}

Output everything after calculation
X is used before you declared it. In your original code you had
document.getElementById("showresults").innerHTML += userinput2 + "<br/>" + 'Amount To Offer : ' + X + "<br />" + "<br />";
before X was declared so of course it is going to give you undefined
I have changed the order of things so that X is first calculated then used
var userinput1 = document.getElementsByClassName('txtin')[L].value;
var userinput2 = document.getElementsByClassName('numin')[L].value;
var FP = funds / 100; // 1% of funds available
var SP = s / 100; // 1% of debt total
var R = userinput2 / SP;
R = R.toFixed(2);
var X = FP * R;
X = X.toFixed(2); //amount to offer in settlement
console.log('Loop = ' + L + ' Text input = ' + userinput1);
document.getElementById("showresults").innerHTML += userinput1 + "<br />";
console.log('Loop = ' + L + ' Number input = ' + userinput2);
document.getElementById("showresults").innerHTML += userinput2 +
"<br/>" + 'Amount To Offer : ' + X + "<br />" + "<br />";

Related

How to fix undefined in first iteration on javascript

I got undefined in the first iteration any comments is helpful to me thanks in advance
for (i = 0; i <= nummonth; i++) {
var res = compound * (Math.pow(interest, i));
res = res.toFixed(0);
var tableHTML;
var interestgained = (+res * interest)-res;
interestgained = interestgained.toFixed(0);
var powint = compound * (Math.pow(interest, i));
powint = powint.toFixed(0);
var tr = powint - compound;
var ointerest = (interest - 1)*100;
ointerest = ointerest.toFixed(0);
tableHTML = tableHTML + "<tr><td>Compound: " + i + "</td><td> " + "$"+res + "</td><td> " + ointerest + "%"+"</td><td> " + "$"+interestgained + "</td><td>"+ "$"+powint +"</td></tr>";
}

Inserting Img tag inside div with innerHTML

I'm trying to have multiple tags inside a div using innerHTML.
Here's an example to better explain my issue.
var y = "jack.jpg";
var x = "Jack";
var f = "Hello world!";
document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src="y"/>" + ": " + x + ": " + f + "</div>" ;
As you can see I have too many apostrophes and I don't know how to use them so to have a variable in the src instead of a string. Thank you.
Check the quotes
document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src='"+y+"'/>" + ": " + x + ": " + f + "</div>" ;
var y = "jack.jpg";
var x = "Jack";
var f = "Hello world!";
document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src='"+y+"'/>" + ": " + x + ": " + f + "</div>" ;
<div id="maindDiv"></div>
You can also use Template strings:
var y = 'jack.jpg';
var x = 'Jack';
var f = 'Hello world!';
document.getElementById("maindDiv").innerHTML += `<div class='result'> + : + <img src=${y}/> + : + ${x} + : ${f} + </div>`;
But notice:
1) Those variables are strings (y, x, f) and you forgot the quotation marks;
2) You can't use the quotation marks when you are using the variable, you must use in the creation time.
Create dynamic variables to change image by just changing y:
You may optionally put them in for loop and iterate over an array to change the value of y:
var y = "jack.jpg";
var tagMaker = "<img src=\'./" + y + "\'>";
now use this:
document.getElementById("maindDiv").innerHTML += tagMaker
Assumptions: your image resides beside html file.

Forge viewer model position after transformation

I've used the Model transformation extension to move the model from one point to another. Now How can I get the new location/coordinates/position of the transformed model or its bounding box as when I query the bounding box min and max points they are the same all the time. Any ideas??
My target is to get the new position of the model according to the origin after translation.
I isolated the core section of that extension and check the position and bounding box before and after transformation. To be simple, only translate. It looks those values are updated after transformation. Could you check if it could help to diagnose your problem?
To test it, select one object and run the function.
getModifiedWorldBoundingBox (fragIds, fragList) {
const fragbBox = new THREE.Box3()
const nodebBox = new THREE.Box3()
fragIds.forEach(function(fragId) {
fragList.getWorldBounds(fragId, fragbBox)
nodebBox.union(fragbBox)
})
return nodebBox
}
$('#test').click(function(rt){
var dbids = NOP_VIEWER.getSelection();
var it = NOP_VIEWER.model.getData().instanceTree;
var fragList = NOP_VIEWER.model.getFragmentList();
fragIds = [];
it.enumNodeFragments(dbids[0], function(fragId) {
fragIds.push(fragId);
}, false);
var bb = getModifiedWorldBoundingBox(fragIds,fragList);
console.log('boundingbox before transform: [max,min]: ' +
bb.max.x + ' ' + bb.max.y + ' ' + bb.max.z + '\n'+
bb.min.x + ' ' + bb.min.y + ' ' + bb.min.z );
fragIds.forEach(function(fragId){
var fragProxy = NOP_VIEWER.impl.getFragmentProxy(
NOP_VIEWER.model,
fragId)
fragProxy.getAnimTransform()
console.log('frag position in LCS before transform:' +
fragProxy.position.x + ','+
fragProxy.position.y + ','+
fragProxy.position.z);
var wcsMatrix = new THREE.Matrix4();
fragProxy.getWorldMatrix(wcsMatrix);
var wcsPos = wcsMatrix.getPosition();
console.log('frag position in wcs matrix before transform: ' +
wcsPos.x + ' ' + wcsPos.y + ' ' + wcsPos.z);
fragProxy.position.x += 10;
fragProxy.position.y += 10;
fragProxy.position.z += 10;
fragProxy.updateAnimTransform()
});
NOP_VIEWER.impl.sceneUpdated(true)
fragIds.forEach(function(fragId){
var fragProxy = NOP_VIEWER.impl.getFragmentProxy(
NOP_VIEWER.model,
fragId)
fragProxy.getAnimTransform()
console.log('frag position in LCS after transform:' +
fragProxy.position.x + ','+
fragProxy.position.y + ','+
fragProxy.position.z);
var wcsMatrix = new THREE.Matrix4();
fragProxy.getWorldMatrix(wcsMatrix);
var wcsPos = wcsMatrix.getPosition();
console.log('frag position in wcs matrix after transform: ' +
wcsPos.x + ' ' + wcsPos.y + ' ' + wcsPos.z);
});
bb = getModifiedWorldBoundingBox(fragIds,fragList);
console.log('boundingbox after transform: [max,min]: ' +
bb.max.x + ' ' + bb.max.y + ' ' + bb.max.z + '\n'+
bb.min.x + ' ' + bb.min.y + ' ' + bb.min.z );
});

Script only working in the console even with document.ready

I have a script that runs on a page. It doesn't work, but when I type it into the console then run it it works perfectly.
This might sound like other questions such as this one, but I already have $(document).ready(). All the variables already defined here have been defined earlier in the document.
$(document).ready(function(){
for (var i = 0; i < posts.length; i++) {
var post_html = posts_html[i];
var link = posts[i];
console.log(i);
name = $(post_html)[5].childNodes[1].innerHTML;
document.getElementsByClassName('posts')[0].innerHTML = document.getElementsByClassName('posts')[0].innerHTML + '<li>' + name + '</li>'
console.log(name + ' - ' + posts + ' - ' + i + ' - ' + posts[i] + ' - ' + link);
}
});
Add setTime out function in your code.please try below code:
$(document).ready(function(){ setTimeout(function(){
for (var i = 0; i < posts.length; i++) {
var post_html = posts_html[i];
var link = posts[i];
console.log(i);
name = $(post_html)[5].childNodes[1].innerHTML;
document.getElementsByClassName('posts')[0].innerHTML = document.getElementsByClassName('posts')[0].innerHTML + '<li>' + name + '</li>'
console.log(name + ' - ' + posts + ' - ' + i + ' - ' + posts[i] + ' - ' + link);
}
},5000);});

innerHTML from Javascript Array

I'm trying to preserve Javascript context from an array. Is there any way to make this work? Or a more elegant way?
EXAMPLE:
<html>
<script type="text/javascript">
var rand = Math.floor(Math.random() * 6) + 1;
var i = Math.floor(Math.random() * 6) + 1;
var arr = ["'There are ' + i + ' dogs in the yard.'","'The other day I saw ' + i + ' pigs that one lake.'","'I can't believe there were ' + i + ' birds in your yard the other day.'","'Why were there ' + i + ' cats in my front yard?'","'There are ' + i + ' rabbits in the yard.'","'There are ' + i + ' snakes in the yard.'"];
document.getElementById('fudge').innerHTML = arr[rand];
</script>
<body>
<div id='fudge'></div>
</body>
</html>
Get rid of the outer double quotes.
var arr = [
'There are ' + i + ' dogs in the yard.',
'There are ' + i + ' pigs in the yard.',
'There are ' + i + ' birds in the yard.',
'There are ' + i + ' cats in the yard.',
'There are ' + i + ' rabbits in the yard.',
'There are ' + i + ' snakes in the yard.'
];
Update: Also, place your <script> somewhere below the fudge element. Currently the script is running before fudge exists.
If you want the strings to update with future updates to the variable, that won't work. You'd need to generate a new string.
You could make a function instead.
var animals = ['dogs','pigs','birds','cats','rabbits','snakes'];
function makeString() {
var animal = animals[Math.floor(Math.random() * animals.length)],
qty = Math.floor(Math.random() * 6) + 1;
return "There are " + qty + " " + animal + " in the yard.";
}
makeString(); // "There are 3 dogs in the yard."
You could also take care of the singular/plural grammar value when the qty is 1.
var animals = ['dog','pig','bird','cat','rabbit','snake'];
function makeString() {
var animal = animals[Math.floor(Math.random() * animals.length)],
verb = 'is',
qty = Math.floor(Math.random() * 6) + 1;
if (qty !== 1) {
animal += 's';
verb = 'are';
}
return "There " + verb + " " + qty + " " + animal + " in the yard.";
}
makeString(); // "There is 1 dog in the yard."
I assume that you want to use the variable i to create the strings, not just the letter i. As you use quotation marks around the strings, the variable isn't part of the string.
Instead of:
"'There are ' + i + ' dogs in the yard.'"
just use:
'There are ' + i + ' dogs in the yard.'
or:
"There are " + i + " dogs in the yard."

Categories

Resources