JS Nodes in for loop - javascript

I am trying to add many options in a select tag.
My code is:
var years = document.getElementById("years");
for ( var i = 1526; i < 2013; i++) {
var year = document.createElement("option");
var text = document.createTextNode(i);
year.appendChild(text);
year.setAttribute("value", i);
years.appendChild(year);
}
This doesn't work. There is something wrong with the appendChild function. The loop breaks after running once. I tried doing
var years = document.createElementNode("select");
but this also doesn't work. It runs but there is nothing on the webpage. No select tag and no options.
The Body:
<select id="years"></select>

I have used div tag in append child function
<html>
<script>
function loadOptions()
{
var i;
var selectdiv= "";
selectdiv="<select>";
for(i = 1526; i < 2013; i++){
selectdiv+= "<option value='"+i+"'>"+i+"</option>";
}
selectdiv+= "</select>";
var newDiv=document.createElement('div');
newDiv.innerHTML= selectdiv;
document.getElementById('element1').appendChild(newDiv);
}
</script>
<body onload="loadOptions()">
<div id="element1"></div>
</body>
</html>
Hope this will help you

Related

Google Sheets App Script Html onload not working

I'm using google sheets and I'm creating a document that will pull through employees that are out of the office. I have a menu option to remove employee data, and it opens the sidebar where I have an HTML form (Image of my project). I'm trying to have it generate a dropdown list of current employees on the list.
I've developed the code to pull through the data I need:
function removeAnyone() {
var html = HtmlService.createHtmlOutputFromFile('RemoveAnyone');
SpreadsheetApp.getUi()
.showSidebar(html);
}
function getList() {
var headerRows = 1;
var sheet = SpreadsheetApp.getActive().getSheetByName("Data");
var range = sheet.getRange(headerRows + 1, 1, sheet.getMaxRows() - headerRows, 1);
var arrayValues = range.getValues();
return arrayValues;
}
Now we move over to my html, where I am simply trying to load the dropdown list using a for loop in the header:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function addOption_list() {
document.getElementById("output").innerHTML = "test";
var options = google.script.run.getList();
for (var i = 0; i < options.length; ++i;) {
var optn = document.createElement("OPTION");
optn.text = options[i];
optn.value = options[i];
document.myForm.selectEmployee.options.add(optn);
}
}
</script>
</head>
<body onload="addOption_list()">
<form id="myForm" onsubmit="submitForm(this)">
<select id="selectEmployee">
<option>Choose an employee</option>
</select>
</form>
<div id="output"></div>
</body>
</html>
I threw a div in the body and have the function changing the value to "test" at the start, this was just to check and see if the function was even being called, which it doesn't seem like it is.
I also tried using window.onload (as shown below), but that didn't get me anywhere either.:
window.onload = function {
document.getElementById("output").innerHTML = "test";
var options = google.script.run.getList();
for (var i = 0; i < options.length; ++i;) {
var optn = document.createElement("OPTION");
optn.text = options[i];
optn.value = options[i];
document.myForm.selectEmployee.options.add(optn);
}
}
Any guidance you can give me would be really appreciated!
google.script.run doesn't return values. When you want to return values from GAS, please use withSuccessHandler. And the data retrieved by getValues() is 2 dimensional array. So how about this modification?
Modified script :
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
window.onload = function() {
google.script.run.withSuccessHandler(addOption_list).getList();
}
function addOption_list(options) {
document.getElementById("output").innerHTML = "test";
var select = document.getElementById('selectEmployee');
for ( var i in options) {
var optn = document.createElement('option');
optn.value = options[i][0];
optn.text = options[i][0];
select.appendChild(optn);
}
}
</script>
</head>
<body>
<form id="myForm" onsubmit="submitForm(this)">
<select id="selectEmployee">
<option>Choose an employee</option>
</select>
</form>
<div id="output"></div>
</body>
</html>
Reference :
google.script.run
getValues()
If I misunderstand your question, I'm sorry.

Where is the error [JS DOM HTML]?

I want add options to the select with a js function.
But there is a problem on the vector, i think, someone can help me?
<html>
<body onload="myFunction()">
<select id="mySelect"></select>
<script>
function myFunction() {
var months= ["january","february"];
var mySelect = document.getElementById('mySelect');
var newOption = document.createElement('option');
for(var i=0;i<mesi.length;i++){
newOption.innerHtml=mesi(i).valueOf;
mySelect.appendChild(newOption);
}
}
</script>
</body>
</html>
Your code seems to have the wrong array name in the for block.
Also, when you're calling an index in an array - use square brackets - months[i], not parentheses. And using valueOf is unnecessary.
function myFunction() {
var months= ["january","february"];
var mySelect = document.getElementById('mySelect');
var newOption = document.createElement('option');
for(var i=0;i<months.length;i++){ // <- here is where the fix goes.
newOption.innerHtml=months[i];// <- here is where the fix goes.
mySelect.appendChild(newOption);
}
}

Search a variable value as ID in html file

I would like to ask for your help in having a web site that uses the following javascript:
<html>
<head>
...
</head>
<body>
...
<script>
$(document).ready(function(){
var pathArray = window.location.pathname.split( '/' );
var secondLevelLocation = pathArray[0];
var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
newPathname += "";
newPathname += pathArray[i];
}
var str = "asd fgh roof_material";
var res = str.match(newPathname);
if (res) {
document.getElementById("demo").innerHTML = res;
} else {
document.getElementById("demo").innerHTML = "Basic text";
}
});
</script>
<div id="demo"></div>
</body>
</html>
Such as my website address is: https://www.mywebsite.com/roof_material
I get a string in a variable (newPathname) which contains the text after the / sign, in this example: roof_material
The problem is:
I would like to find the value of this variable in a text and if you can find it then you can post it on the website. It's works if I put a text in a variable like in the script:
var str = "asd fgh roof_material";
But I would like to find the value of this variable (newPathname) in a separate html file, if it is possible like this:
The newPathname value such as: roof_material
In the separated .html file content:
<div id="protection_material">Line-X material</div>
<div id="roof_material">Roof materials</div>
<div id="pool_material">Swimming pools</div>
In this example I would like to find the roof_material ID in the .html file and get the content of the div: "Roof materials" and I would like to show this text on the page:
<div id="demo">Roof materials</div>
If it has positive match then show the content of the div in other cases, it will print a basic text like in the example: "Basic Text"
Could anyone help to make it happen?
#Terry thanks for your answer!
I think I found a simpler solution, but it's not perfect:
<script>
$(document).ready(function(){
var pathArray = window.location.href.split('=')[1];
var secondLevelLocation = pathArray[0];
var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
newPathname += "";
newPathname += pathArray[i];
}
document.getElementById("demo").innerHTML = newPathname;
});
</script>
<div id="demo">Országosan</div>
If I type it in the browser such as: https://www.mywebsite.com/index then the text that will appear in #demo div is: "Országosan"
It's good, but if I type such as: https://www.mywebsite.com/index?id=Cserkeszőlő
then the result is good but character encoding does not work properly.
The result in the #demo div: Cserkesz%C5%91l%C5%91 , but I would like to show the correct encoded text like this: Cserkeszőlő
Can you give me a solution on this?

doesnt get in the if statement javascript DOM

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>

Tried writing a do-while loop statement that prints out my statement, but it's not currently printing it

So, I am trying to write a do-while loop statement that prints out the statement of my loop, but my browser isn't printing my text. How can I edit my code to do so?
<!DOCTYPE html>
<html>
<head>
<title>9. Looping Statements in Javascript</title>
</head>
<body>
<h1>9. Looping Statements in Javascript</h1>
<div id="playlist"></div>
<div id="someResult"></div>
<script>
var playlist = [];
playlist[0] = "Willy Wesly";
playlist[1] = "Childish Gambino";
playlist[2] = "Chance The Rapper";
playlist[3] = "Travi$ Scott";
playlist[4] = "Yeezy";
// while
/*
var i = 0;
while (i < playlist.length) {
var element = document.createElement('div');
element.innerHTML = "Now Playing: " + playlist[i];
i++;
document.body.appendChild(element);
}
*/
// do - while
var someResult = false;
do {
var element = document.createElement('div');
element.innerHTML = 'Will print AT LEAST once!';
}
while(someResult);
</script>
</body>
</html>
You need to add the element to the document body.
var someResult = false;
do {
var element = document.createElement('div');
element.innerHTML = 'Will print AT LEAST once!';
//You need to add it to the body for it to show on the page
document.body.appendChild( element );
}
while(someResult);
JSFiddle showing this: http://jsfiddle.net/azgxh59q/

Categories

Resources