This code appends an extra element to the first generated menus every time the function is called. The last element in each array is missing in all subsequent calls. I can't seem to figure out why this is happening.
<script type="text/javascript" language="javascript">
var elements = ['one','two','three','etc'];
var positions = ['Producer', 'Tech', 'Assist', 'Voice'];
function addNamelist() {
var q = document.createElement('select');
for (var j=0; j<positions.length; j++) {
q.setAttribute('id', positions[j]);
document.body.appendChild(q);
var r = document.createElement('option');
r.setAttribute('value', positions[j]);
var m = document.createTextNode(positions[j]);
r.appendChild(m);
document.getElementById(positions[j]).appendChild(r);
}
var y = document.createElement('select');
for (var i = 0; i < elements.length; i++) {
y.setAttribute('id', elements[i]);
document.body.appendChild(y);
var z = document.createElement('option');
z.setAttribute('value', elements[i]);
var t = document.createTextNode(elements[i]);
z.appendChild(t);
document.getElementById(elements[i]).appendChild(z);
}
}
</script>
</head>
<body>
<form action="editpageentry.php"><form>
create field
</body>
</html>
Related
I am try to create a loop with jQuery 2.1.0 that appends a paragraph each loop. This is my code so far
for (var i = 0; i < 3; i++) {
var hobby = prompt("tell me one of your hobbies!");
$("body").append("<p>" + hobby + "</p>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
so the prompt comes up and works fine but then it doesn't append... and it doesn't loop. Any help much appreciated.
Try to use native js.
for (var i = 0; i < 3; i++) {
var hobby = prompt("tell me one of your hobbies!");
var p = document.createElement('p');
p.innerHTML = hobby;
document.body.appendChild(p);
}
$(document).ready(function(){
for(var i = 0; i<3;i++){
var hobby = prompt("tell me one of your hobbies!");
var newP = $("<p>");
newP.text(hobby);
$("body").append(newP);}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am working on a check-in app though Google Sheets and want to make a search function that that takes a sport name as input in an HTML form and then returns information about the sport from the sheet in a HTML table. However, when I try to test the web app, nothing happens. How can I fix this?
Here is my code:
Index.html
<!DOCTYPE html>
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
</head>
<body>
<fieldset id="tasks-panel">
<legend>Sports</legend>
<form name="sport-form" id="sport-form">
<label for="sport-name">Search a sport by name:</label>
<input type="text" name="sport-name" id="sport-name" />
<button onclick='addTable()' id='submit-button'>Press this</button>
</form>
<p>List of things:</p>
<div id="toggle" style="display:none"></div>
</fieldset>
<?!= HtmlService.createHtmlOutputFromFile('Javascript').getContent(); ?>
</body>
</html>
Javascript.html
<script>
function addTable() {
var sportInput = $('sport-name').value();
var columnNames = ["Names", "Times"];
var dataArray = google.script.run.getSportData(sportInput);
var myTable = document.createElement('table');
$('#divResults').append(myTable);
var y = document.createElement('tr');
myTable.appendChild(y);
for(var i = 0; i < columnNames.length; i++) {
var th = document.createElement('th'),
columns = document.createTextNode(columnNames[i]);
th.appendChild(columns);
y.appendChild(th);
}
for(var i = 0 ; i < dataArray.length ; i++) {
var row= dataArray[i];
var y2 = document.createElement('tr');
for(var j = 0 ; j < row.length ; j++) {
myTable.appendChild(y2);
var th2 = document.createElement('td');
var date2 = document.createTextNode(row[j]);
th2.appendChild(date2);
y2.appendChild(th2);
}
}
}
</script>
Code.gs
//Setting up global variables
var ss = SpreadsheetApp.openById("-spreadsheetID-");
var sheet = ss.getSheetByName("Sheet1");
var sportsFromSheet = sheet.getRange("D4:D12");
var namesFromSheet = sheet.getRange("B4:B12").getValues();
var timesFromSheet = sheet.getRange("A4:A12").getValues();
var NAMES = [];
var TIMES = [];
var OUTPUT = [];
//doGet function
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate()
.setTitle('Check In Data')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
//Gets both names and times of checked-in people
function getSportData(input) {
var sportInput = input;
getNamesInSport(sportInput);
getTimesInSport(sportInput);
OUTPUT = [
[NAMES],
[TIMES]
];
Logger.log(OUTPUT);
return OUTPUT;
}
//Puts the names of every person from an inputted sport into an array.
function getNamesInSport(input) {
var data = sportsFromSheet.getValues();
for (var i = 0; i < data.length; i++) {
if(data[i] == input){
NAMES.push(namesFromSheet[i][0]);
}
}
}
//Puts the times of every person from an inputted sport into an array.
function getTimesInSport(input){
var data = sportsFromSheet.getValues();
for (var i = 0; i < data.length; i ++) {
if(data[i] == input){
TIMES.push(timesFromSheet[i][0]);
}
}
}
JQuery id selectors must be prefixed with # so to grab the value from the the 'sport-name' input you'll need to select it using
var sportInput = $('#sport-name').val();
Additionally, as Robin comments above, if you want to use the JQuery library you'll need to load it, the code you've shown indicates you might not have done this?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Although if this were the case you'd probably be seeing a '$ is not defined' error straight away.
So I want to add a dropdown in my form that will display numbers from 1 to 999 .
I have tried to do it using JS but it doesn't work
Here is what I have tried so far :
<html>
<head>
<script>
window.onload = fillDropDown();
function fillDropDown() {
var ddl = document.getElementById( 'myDropdown' );
var theOption = new Option;
var x;
var i;
for(i = 0; i < 999; i++) {
x = i + 1;
theOption.text = x;
theOption.value = x;
ddl.options[i] = theOption;
}
}
</script>
</head>
<body>
<form id="myForm">
<select id="myDropdown"></select>
</form>
</body>
But it doesn't work .
Here is a jsfiddle example http://jsfiddle.net/j3nLxptn/
It works if you instantiate the option inside the loop:
for (i = 0; i < 999; i++) {
var theOption = new Option;
x = i + 1;
theOption.text = x;
theOption.value = x;
ddl.options[i] = theOption;
}
See http://jsfiddle.net/j3nLxptn/1/
The issue is that you are always reusing the same option element. You have to create a new Option instance at every iteration and that you can use add to actually append select options.
Also note that the Option constructor can take text and value parameters.
for (i = 0; i < 999; i++) {
x = i + 1;
ddl.add(new Option(x, x), null);
}
Given the following code below, how can I have it modified such that it will alert me back what is the value in the first column of any of the selected rows?
i.e. selected row is number two, so, alert("oranges")
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var x = '<table id="mstrTable" border="1" cellspacing="1" width="100">\n'
+ '<tr><td>Apples</td><td>Carrots</td></tr><tr><td>Oranges</td><td>Celery</td></tr>\n'
+ '</table>\n'
document.getElementById('test').innerHTML = x
var color = "#E1E0D7"
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
function changeColor(e) {
if(!e) e = window.event;
var o = e.target? e.target: e.srcElement;
while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
for(var i=0; i<n; ++i) {
rows[i].style.backgroundColor = bgcs[i];
if(rows[i]==o) rows[i].style.backgroundColor = color;
}
}//end of function
if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
}//end of onload()
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
function getFirstCol(row){
alert(row.getElementsByTagName('td')[0].innerHTML);
}
// Example usage
getFirstCol(rows[0]);
Get the children of the tr node when you change the color.
if(rows[i]==o) {
rows[i].style.backgroundColor = color;
console.log(rows[i].children[0])
}
DEMO
I'm working on a to do list and I'm trying to create a delete button that will prompt an id number to delete a record. You pick which record you want to delete. Not sure how to go about doing it. This code has the html in it as well.
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<style>
body{margin:20px;}
</style>
<script type="text/javascript">
var list;
var addBtn;
document.addEventListener("DOMContentLoaded",load);
function load(){
list = get("list");
checkboxes = getTag("input");
addBtn = get("addBtn");
addBtn.addEventListener("click",addItem);
for(var i = 0, l = checkboxes.length; i < l ; i++){
if(checkboxes[i].type == "checkbox")
checkboxes[i].addEventListener("click",updatePercent);
}
if(localStorage.listFile)
//list.innerHTML = localStorage.listFile;
updatePercent();
}
function updatePercent(){
var checkboxes = getTag("input");
var total = checkboxes.length/2;
var done = 0;
for(var i = 0, l = checkboxes.length; i < l ; i++){
if(checkboxes[i].checked)
done++;
}
get("percentage").innerHTML = "Done: " + Math.round((done/total)*100) + "%";
}
function addItem(){
var item = document.createElement('li');
var chk = document.createElement("input");
var txt = document.createElement("input");
chk.type = "checkbox";
txt.type = "text";
chk.addEventListener("click",updatePercent);
item.appendChild(chk);
item.appendChild(txt);
list.appendChild(item);
updatePercent();
}
function get(id){
return document.getElementById(id);
}
function getTag(tag){
return document.getElementsByTagName(tag);
}
function save(){
localStorage.listFile = list.innerHTML;
}
function deleteTsk(){
var i = prompt("Enter number you want to delete") - 1;
//checkboxes[i].splice(i,1);
checkboxes[i].innerHTML = "";
}
</script>
</head>
<body>
<h1>Kung Fu To Do List 1.0</h1>
<ol id="list">
<li><input type="checkbox"><input type="text"></li>
</ol>
<p id="percentage"></p>
<button id="addBtn">Add Item</button><button onclick="save()">Save</button><button onclick="deleteTsk()">Delete</button>
</body>
I figured out how to delete it with this method.
function deleteTsk(){
var i = prompt("Enter number you want to delete") - 1;
var item = getTag("li");
list.removeChild(item[i]);
}
I figured out how to delete it with this method.
function deleteTsk(){
var i = prompt("Enter number you want to delete") - 1;
var item = getTag("li");
list.removeChild(item[i]);
}