doesnt get in the if statement javascript DOM - javascript

so I have to get the bigger salary of the average salary and to print the name of the person, but I don't get in the if at least the alert says so. Here is my code:
<html>
<body>
<script type="text/javascript">
xDOC = new ActiveXObject("Microsoft.XMLDOM");
xDOC.async = "false";
xDOC.load("pti_project.xml");
x = xDOC.getElementsByTagName("person");
alert(x.length);
var avgsal = 11450 / x.length;
for (var i = 0; i < x.length; i++) {
var salary = x[i].getElementsByTagName("salary");
if (salary * 1 > avgsal * 1) {
alert("1");
var person = x[i].getElementsByTagName("name");
document.write(person[0].childNodes[0].nodeValue);
}
}
document.write(avgsal);
</script>
</body>
</html>
No clue why is this happens, it should work.

How its name says, the method getElementsByTagName() returns a collection of objects, not their values.
Look at the example in this page: https://msdn.microsoft.com/en-us/library/ms765549(v=vs.85).aspx
The result of the function is iterated with a for loop to get each matched element and then its xml property is printed.
Something like:
(salary.length > 0 ? parseFloat(salary.item(0).xml) : 0)
would work for you instead of only salary.
This expression will check if the collection is not empty and if so will get the content of first element. Otherwise will return zero.

Here is my answer to my question I needed little time , but I made it . So here is the code if somebody needs help with such type of situation :
<html>
<body>
<script type="text/javascript">
xDOC=new ActiveXObject("Microsoft.XMLDOM");
xDOC.async="false";
xDOC.load("pti_project.xml");
x=xDOC.getElementsByTagName("person");
var avgsal = 11450/x.length;
for(var i=0; i<x.length; i++)
{
var salary=x[i].getElementsByTagName("salary");
if(salary[0].childNodes[0].nodeValue>avgsal*1)
{
var person=x[i].getElementsByTagName("name");
document.write(person[0].childNodes[0].nodeValue);
document.write("<br>");
}
}
</script>
</body>
</html>

Related

How do i make a website that creates a html table using javascript prompts?

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var r = prompt ("how many rows ?");
var c = prompt ("how many columns ?");
var red = prompt ("how red ?");
var green = prompt ("how green ?");
var blue = prompt ("how blue ?");
document.write('<table style="width:100%" bgcolor="'+red+''+green+''+blue+'">');
for(var r = i; i > -1; i--){
document.write('<tr>');
for(var c = i; i > -1; i--){
document.write('<th></th>');
};
document.write('</tr>');
};
document.write('</table>');
</script>
</head>
<body>
</body>
</html>
What is wrong with my code ? I answer all the prompts but nothing happens on the screen. My professor said that i would need a for loop inside of an another for loop, what am i missing?
One issue is that you are not initializing the i variable (there is no 'var i' in your code). This variable is the index variable for your loop, set it to the row/column input variable that the user entered.
Also, when you put a nest loops don't try to reuse the index variable (i).
And work through the logic of the loop iterator, you actually want the loop to run to condition i > 0
Change the loops to something like:
for(var i = r; i > 0; i--){
document.write('<tr>');
for(var j = c; j > 0; j--){
...
And check on what the th tag is in html, you really want td
And then you will still not see the table you just created because there is no content in the 'cells', so you can add content or you can see the table when you use the browser developer tools.
Multiple corrections:
Don't use document.write multiple times, since each call will overwrite the contents of the body.
Your iterator assignment logic was backwards - assign i = r, not r = i, since the value of the expression (variable in this case) on the right side gets assigned to the variable on the left side.
You need to use a separate iterator variable (e.g. j) for the inner for loop, otherwise it would interfere with the outer loop.
The iterator conditions are off by 1. If you are going to decrement from the max number (of rows, columns) then iterate while i/j are greater than 0, not -1
var r = prompt ("how many rows ?");
var c = prompt ("how many columns ?");
var red = prompt ("how red ?");
var green = prompt ("how green ?");
var blue = prompt ("how blue ?");
var html = '<table style="width:100%" bgcolor="'+red+''+green+''+blue+'">';
for(var i= r; i > 0; i--){
html += '<tr>';
for(var j = c; j > 0; j--){
html +='<th></th>';
};
html += '</tr>';
};
html +='</table>';
document.write(html);
//or else instead of document.write, use something like the line below :
//document.body.innerHTML = html;
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body id="container">
</body>
</html>

How to use an element property to pass a variable from Javascript

I'm attempting to send emails using an HTML template.
I've looked at this post:
(https://stackoverflow.com/questions/33178702/passing-variables-into-html-code)
Would either of the two code examples be close to something that could work to pass the variables from the Javascript to the HTML template?
My javascript variables are named detail2, detail3, detail4, detail5 and detail6.
1st attempt:
<html>
<head>
<script>
{
var detail2 = document.getElementById("detail2").innerHTML;
var detail3 = document.getElementById("detail3").innerHTML;
var detail4 = document.getElementById("detail4").innerHTML;
var detail5 = document.getElementById("detail5").innerHTML;
var detail6 = document.getElementById("detail6").innerHTML;
}
}
</script>
</head>
<body>
<p>
<br>"Punctual? " document.getElementById('detail2').value<br>
<br>"Attention to detail? " document.getElementById('detail3').value<br>
<br>"Overall Professionalism? " document.getElementById('detail4').value<br>
<br>"Date of Service: " document.getElementById('detail5').value<br>
<br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>
</body>
</html>
2nd attempt:
<html>
<head>
<script>
{
<input type="hidden" id="Detail2" value="detail2" />
<input type="hidden" id="Detail3" value="detail3" />
<input type="hidden" id="Detail4" value="detail4" />
<input type="hidden" id="Detail5" value="detail5" />
<input type="hidden" id="Detail6" value="detail6" />
}
}
</script>
</head>
<body>
<p>
<br>"Punctual? " document.getElementById('detail2').value<br>
<br>"Attention to detail? " document.getElementById('detail3').value<br>
<br>"Overall Professionalism? " document.getElementById('detail4').value<br>
<br>"Date of Service: " document.getElementById('detail5').value<br>
<br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>
</body>
</html>
Finally, the method given on GAS Dev is below, but this only confuses me more. I am sure I've been at this too long and I'm burned out, I just can't seem to see the answer on this one.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
If anyone can help it's much appreciated!
Below is the Javascript from the .gs script file.
function SendEmail() {
// initialize data
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var range = sheet.getDataRange();
var values = range.getValues();
// iteration loop
for (var i = 1; i<values.length; i++) {
// current times for comparator
var month = new Date().getMonth(); // returns today as 0-11 -- Jan is 0
var day = new Date().getDate(); // returns today as 1-31
var hour = new Date().getHours(); // returns today as 0-23
var minute = new Date().getMinutes(); // returns today as 0-59
// pull data from spreadsheet rows
var company = values[i][0];
var rating = values[i][1];
var detail1 = values[i][2];
var detail2 = values[i][3];
var detail3 = values[i][4];
var detail4 = values[i][5];
var detail5 = values[i][6];
var sendTime = values[i][7];
// character send times for comparator
var cSendMonth = sendTime.getMonth(); // returns sendMonth as 0-11 -- Jan is 0
var cSendDay = sendTime.getDate(); // returns sendDay as 1-31
var cSendHour = sendTime.getHours(); // returns sendHour as 0-23
var cSendMinute = sendTime.getMinutes(); // returns sendMinute as 0-59
// comparator
if(cSendMonth == month) {
if(cSendDay == day) {
if(cSendHour == hour) {
if(cSendMinute == minute) {
var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
MailApp.sendEmail({
to: Session.getActiveUser().getEmail(),
subject: 'Test Email markup2 - ' + new Date(),
htmlBody: htmlBody,
});
} // end if minute test
}// end if hour test
}// end if day test
}// end if month test
}// end for loop
}
Can you try:
<html>
<head>
<script>
(function() {
var detail2 = document.getElementById("detail2").innerHTML;
document.getElementById("detail2_val").innerHTML = detail2;
})();
</script>
</head>
<body>
<p>
<br>"Punctual?" <span id="detail2_val"></span><br>
</p>
</body>
</html>
Currently, this line:
var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
will not evaluate a template.
The method being used is:
createHtmlOutputFromFile('mail_template')
HtmlService has quite a few methods for creating html content. You need to use:
HtmlService.createTemplateFromFile(filename).evaluate()
There are some possible things that could go wrong in your overall work flow. If the situation is one in which you are writing data, and then immediately trying to read that same data that was just written, there could be a problem with the new data not being available to be read in such a short time span.
I would use:
SpreadsheetApp.flush();
immediately after writing the new data, and before creating the template.
Only your third html example has code for a template. To retrieve data and put it into a template, a scriptlet must either run a function, that then retrieves the data, or the data must be in global variables. The situation with global variable makes no sense, because you are using dynamic data, so a function would need to run to first put the data into a global variable. The function might as well just return the data directly. So, your scriptlet will probably need to run a server side function and return text or HTML to the html template. You probably need to use a printing scriptlet.
Apps Script documentation - force printing scriptlets

How to print checked checkbox values?

The html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="scripts.js"></script>
</head>
<body>
<button id = "button1" type="button" onclick="filterValues();">Submit</button>
</body>
</html>
My javascript:
var checkingValues = ["Cat", "Dog", "Horse", "Tree"];
var createCheckboxes;
var saveValues;
document.write("Choose from the options below: </br> </br>");
for (var i = 0; i < checkingValues.length; i++) {
createCheckboxes = document.createElement("INPUT");
var checkbox = createCheckboxes.setAttribute("type", "checkbox");
createCheckboxes.setAttribute("value", checkingValues[i]);
var checkBoxText = document.body.appendChild(createCheckboxes) + document.write(createCheckboxes.value +"</br>");
}
//try to save checked values
if(createCheckboxes.checked){
saveValues = checkbox;
}
function filterValues() {
document.write(saveValues);
}
My idea is to generate a checkbox and print(filter) the selected items from the checkbox by saving the selected items in to a new array and just print them on a cick. I feel i need to make a simple if statement for that but i cant seem to write the values in the global saveValues variable. I know that is not the smartest way to do it but i want to know how to do it. I want to use pure JS.
Thanks.
If you're restricted to pure Javascript, you could always do the following:
var inputs = document.getElementsByTagName('input');
for(var i=0; i < inputs.length; i++){
if(inputs[i].type == 'checkbox' && inputs[i].checked) {
//print
console.log(inputs[i].value);
}
}
That will get all checked checkboxes on the page and print their values. Instead of printing to the console you could do some other logic, or add the checkbox to a second array for later use.
Try this,
function filterValues() {
for (var i = 0; i < checkingValues.length; i++) {
if(createCheckboxes.checked){
saveValues = checkbox;
}
}
document.write(saveValues);
}

Call Script Javascript and HTML

I need some help because my callback function, parseMovie() is only being called once! Despite being in a for loop which iterates it twice. I am using a free Rottentomatoes API
The output only returns one ID, and not two ID's!
And runs parseMovie() only once and returns the movie ID with the last movie.
Does anyone have a fix for this script running problem?
HTML CODE
<!doctype html>
<html class="no-js">
<head>
<title>Movies</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<form name="input">
<p> Actor/Actress Name: <input type="text" name="fullName"> </p>
<p> Movie 1 <input type="text" name="movie"> </p>
<p> Movie 2 <input type="text" name="movie"> </p>
<p><input type="button" value="Search movies" onclick="getMovies()"></p>
<p><textarea name="output" readonly> </textarea> </p>
</form>
</body>
</html>
JAVASCRIPT
//api key
var APIKEY = "qf54ubt95fea9n7jytr5xh6h";
var movieID = new Array();
var actor = new Array();
var actorName = "Jennifer Lawrence";
var movieTitle;
var output;
function callScript(call) {
var script = document.createElement('script');
script.setAttribute("src", call);
document.body.appendChild(script);
}
function getMovies() {
for (var x=0; x<2; x++) {
movieTitle = document.getElementsByName('movie')[x].value;
movieTitle= cleanMovieTitle(movieTitle);
var movieURL = "http://api.rottentomatoes.com/api/public/v1.0/movies.json?q=";
callScript(movieURL + movieTitle + "&page_limit=10&page=1&apikey=" + APIKEY + "&callback=parseMovie");
}
}
function cleanMovieTitle(movie) {
movie = movie.trim();
movie = movie.replace(/ /g, "+");
return movie;
}
function parseMovie(data) {
var titleData = data.movies;
for (var t=0; t<titleData.length; t++) {
movieID[movieID.length] = titleData[t].id;
aCast = titleData[t].abridged_cast;
sample = [];
for (var person = 0; person < aCast.length; person++) {
sample[sample.length] = aCast[person].name;
}
actor[actor.length] = sample;
}
for (var arry = 0; arry < actor.length; arry++) {
if (actor[arry].indexOf(actorName) >= 0) {
output = movieID[arry];
break;
} else {
alert("spelling error of some sort! Error 404");
}
}
document.input.output.value = output;
}
Your statement var titleData = data.movies; is wrong, because the data returned by the API contains an array of movies.
You have to iterate through data.movies to get the data for the other movies (and not only the first one).
See the raw JS code and JSON data returned by the API: api.rottentomatoes.com
Three things that strike me as odd that might be causing the problem.
Using for…in for an array is considered bad practice, especially when there's a native forEach method and a polyfill for ie8-
cleanMovieTitle isn't doing anything because it doesn't return a value. If you were passing it an array or object, it would pass by reference and it would be altered, but that is considered bad practice for the exact reason that it's not working. You're passing a value, the function modifies that value within the function's scope, then does nothing with it. You need to return the string and set movieTitle = cleanMovieTitle(movieTitle); So maybe the API isn't returning for one of the titles because it hasn't been cleaned. See Passing by Reference or by Value.
The callback may be is getting called again before it finishes running. Not sure on this one, but you could check by flooding the loop with console.logs and seeing whether it's the case.
Edit
So I just ran your script on this page and I'm getting an error on document.input.output.value = output; As expected, parseMovies runs twice when I remove this line. What's document.input?

Javascript Dynamic pointer allocation

I'm wondering whether I can assign the pointer of a variable as something along the lines of
"image"+i+".src"
I've tried using eval, because that's the only suggestion I've found, but I'm being thrown a undefined variable error. Here's my code, if someone wouldn't mind taking a look:
<html>
<head>
<script type="text/javascript">
<!--
m = 0
x = 0
image=[ //Initializes the Array for Image URLs, Add object by adding the full URL in "" with , in between each entry
"http://i.imgur.com/OaElB10.jpg",
"http://i.imgur.com/NTYiEB9.jpg",
"http://i.imgur.com/X1jreGc.jpg"]
function ImgPreloadHandler()
{
l = image.length
for(t=0; t<l; t++)
{
var image+t = new image()
image+t = image[t]
}
}
ImgPreloadHandler()
//-->
</script>
</head>
<body>
<img src="http://i.imgur.com/mv3sV8m.png" name="slide" width="796" height="600" />
<script>
function slideit()
{
var step = 0
var z = step
if (!document.images)//if browser does not support the image object, exit.
return
document.images.slide.src=
if (step<x)
step++
else
step=1
setTimeout("slideit()",2500)//call function "slideit()" every 2.5 seconds
}
slideit()
</script>
</body>
</html>
You can't create a dynamic variable name. But there's plenty of other solutions.
Why not create an Object that contains your image values?
var images = {};
for(t=0; t<l; t++) {
images[image + t] = image[t];
}
console.log(images);
> {
image0: "http://i.imgur.com/OaElB10.jpg",
image1: "http://i.imgur.com/NTYiEB9.jpg",
image2: "http://i.imgur.com/X1jreGc.jpg"
}
By the way, don't use eval :)

Categories

Resources