Raffle thing not working - javascript

Coding problem for raffle won't work!
var i = 0;
var count;
var names = [
"Stefon",
"Garret",
"Brandon"
];
function GetRandomInt(){
return Math.floor(Math.random()*i+1);
}
function CallWinner(){
var ID = GetRandomInt();
document.write("<hr>"+names[ID]+" has won with the ID of "+id+"!");
}
do {
i++;
for(count=0;i<=names.length;){
count++;
document.write(names[count]+" has been assigned to the raffle ID, "+count+"<br>");
}
} while (i<=names.length);
For some reason this isn't working, it acts like an infinite loop or maybe it crashes the tab, it works but then it crashes the tab. Please help.

document.write is document.wrong. Please use something more modern and less prone to doing confusing things. This function tries to write to the current document. If the document has already been processed, the document will be replaced with a blank one with your argument. You don't want that; use the proper DOM methods instead.
Your GetRandomInt function is broken; it should return a random accessible index in the array, not a static number.
Try something like this instead:
const names = [
"Stefon",
"Garret",
"Brandon"
];
function GetRandomIndex() {
return Math.floor(Math.random() * names.length);
}
function CallWinner() {
const index = GetRandomIndex();
const hr = document.body.appendChild(document.createElement('hr'));
hr.textContent = names[index] + " has won with the ID of " + index + "!";
}
names.forEach((name, count) => {
const div = document.body.appendChild(document.createElement('hr'));
div.textContent = name + " has been assigned to the raffle ID, " + count;
});
CallWinner();

Related

Way to many quotation marks in javascript

I have a TableA containing brands with names, names are for example: brand1, 123, brand2, 999.
I want to select names, create button with id=name and pass the name to function brandOnOff(name), then alert the name I passed.
When I press button "123" or "999" it works correctly. But buttons "brand1" and "brand2" don't work - they alert: [object HTMLButtonElement]. I think I have I problem with "" and '' and I don't know how to fix it...
When I alert(document.getElementById("demo").innerHTML) I get:
<button id="brand1" onclick="brandOnOff(brand1)">brand1</button><button id="123" onclick="brandOnOff(123)">123</button><button id="brand2" onclick="brandOnOff(brand2)">brand2</button><button id="999" onclick="brandOnOff(999)">999</button>
and I think it should be like: ... onclick="brandOnOff("brand1")"... etc --- Quotation-mark then name then Quotation-mark
but when I try to add Quotation-marks there's an error "Unexpected end of input" and I keep messing it up.
Can somebody help me please? I'm stuck :(
Here is the code:
DB.transaction(function (tx) {
tx.executeSql('SELECT * FROM TableA', [], function (tx, rs) {
var brand;
for (i = 0; i < brands; i++)
{
brand = rs.rows.item(i).name;
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + '<button id="' + brand + '" onclick="brandOnOff(' + brand + ')">' + brand + '</button>';
}
}, function (tx, error) {
console.log('SELECT error: ' + error.message);
});
});
function brandOnOff(brandName) {
alert(brandName);
}
Your main issue is caused by trying to use inline event handlers, when these are generally considered obsolete and addEventHandler is universally supported.
You should also split out your logic somewhat into smaller testable units, that separate HTML page generation from database code:
// event handler - passed the clicked element in ev.target
function brandOnOff(ev) {
alert(ev.target.id);
}
// takes an array of brand names and generates a button for each
function buildBrandButtons(brands) {
let demo = document.getElementById('demo');
brands.forEach(brand => {
let button = document.createElement('button');
button.id = brand;
button.textContent = brand;
button.addEventListener('click', brandOnOff);
demo.addChild(button);
});
}
// converts a result set into an array of the specified field's values
function getResultSetField(rs, field) {
let values = [];
for (let i = 0; i < rs.rows.length; ++i) {
values.push(rs.rows.item(i)[field]);
}
return values;
}
// the meat - gets the brand names, builds the buttons
function processBrands(tx, rs) {
let brands = getResultSetField(rs, 'name');
buildBrandButtons(brands);
}
// generic error handler
function selectError(tx, error) {
console.log('SELECT error: ' + error.message);
}
// the actual database work
DB.transaction(tx => {
tx.executeSql('SELECT * FROM TableA', [], processBrands, selectError);
});
This may look like a lot more code, but each part has a specific responsibility, and some of these functions may be re-used later (e.g. selectError, getResultSetField).
NB: no nested quote marks, or indeed any that aren't around a string constant.

Google Scripts - getFrom() is not a function error

I had this working before, without an issue, however ever since I put a filter in to remove all threads with more than 1 email it is now coming up with the not a function error. I remove the filter and it still comes up with the error, unsure what has caused this to completely break on me
function extractEmails() {
var htmlBody = getEmailHtml();
var labelName = "auto-reply-incoming";
// get all email threads that match label
var receivedSearchQuery = "label:"+labelName+" -is:sent";
var threads = GmailApp.search(receivedSearchQuery, 0, 500);
threads.forEach ((t, i) => {
let messages = t.getMessages();
let name = messages.getFrom();
let messageCount = t.getMessageCount();
if (messageCount > 1) {
label.removeFromThread(t);
}
if (messageCount <= 1) {
message.reply("Hi " +name+" \n" + "insert text here");
}
});
};
accidentally removed part of the script, fixed with the following code:
messages.forEach ((m, j) => {
let name = m.getFrom();
m.reply("Hi " +name+" \n" + "insert text here");
});
Replace
let name = messages.getFrom();
by
let name = messages[0].getFrom();
The above because getFrom() is method from Class GmailMessage but messages is an Array.
Reference
https://developers.google.com/apps-script/reference/gmail/gmail-message#getfrom

Javascript returning multiple checkbox values

I'm having some trouble trying to get multiple checkbox values. It currently is working, just not in the way I wanted/was hoping it would. Right now anything checked is appended to the bottom of the body and not inline with the function it was aiming to be inserted into.
I'm trying to avoid using JQuery or anything except JavaScript as it's all we've currently covered in our class.
function favMedia(media){
var media = document.forms['mediapref']['media'].value;
return media;
}
function pets(pet){
var pet = document.getElementsByName('pets')
for (var checkbox of pet){
if (checkbox.checked)
document.body.append(checkbox.value + ' ');
}
}
function about(text){
var info = document.forms['personal']['about'].value;
return info;
}
function infoForm(media, pet, text){
document.getElementById('infoset').innerHTML = favMedia(media) + "<br>" + pets(pet) + "<br>" + about(text);
}
Is there some way I can assign it just to a single variable to return and then throw into the last function?
Also please give me any tips or improvements on any aspect of the functions if you have any.
Put it in a string that you return from the function.
function pets(pet) {
var pet = document.querySelector('[name="pets":checked');
let selected = [...pet].map(p => p.value);
return selected.join(', ');
}

querySelector returns 'Failed to execute div is not a valid selector' when it exists in the DOM

I'm running into an issue where the 'div ID' isn't valid when I run it from the code.
However, when I document.querySelector('#div-gpt-ad\\/1594654184865-0>div') it returns the correct div ID.
Screenshot of error: https://gyazo.com/a7f1898f246bd84f28e85c2052ac60eb
The div id exists on page before executing the code, the console.log in the renderDiv function returns
Here is the code I'm trying to execute:
var slots = window.top.googletag.pubads().getSlots();
init(slots);
function init(slots) {
for (let i = 0; i < slots.length; i++) {
renderDiv(slots[i]);
}
}
function getSelectors(slot) {
var escapeCheck = slot.getSlotElementId();
if(escapeCheck.includes('/')){
let placeHold = escapeCheck.replace(/\//g, '\\\\/');
return "#" + placeHold + ">div" ;
} else{
return "#" + escapeCheck + ">div";
}
}
function renderDiv(slot) {
let selector = getSelectors(slot);
console.log("Selector:" + selector)
document.querySelector(selector)
}
Fixed!
Changed let placeHold = escapeCheck.replace(/\//g, '\\\\/'); to
let placeHold =escapeCheck.replace(/\//g, "\\/").replace(/\./g, "\\.");
Something I quite don't understand yet is why the first one did not work as the string was correct that was passing through

Variable scope or return issue (not sure which)

Using the script below I'm attempting to create an object called temptagarray which gets populated with all the tags on a Tumblr weblog and their frequency. So it should end up looking like this:
{'performance': 10, 'installation': 5}
I know the object is being created and it looks correct (I can print it out in each loop) but I can't figure out how to use it after/outside the function i.e. at the bottom of the script where I attempt to document.write() it out. Is this a global/local variable issue, a return issue or do I need to address it in some way?
<script type="text/javascript">
var temptagarray = {};
var tags;
var tag;
function loadPosts () {
var key = "api_key=9I4rZAYQCbU1o5TSMZuyrlvXiQsNxKBicCJxNK5OKZ6G9pgdim";
var api = "https://api.tumblr.com/v2/blog/garrettlynch.tumblr.com/";
var retrieve_more = function (offset) {
$.getJSON(api + "posts?callback=?&filter=image&limit=20&offset=" + offset + "&" + key,function(data) {
//for each item (post) in the response
$.each(data.response.posts, function(i, item) {
//pull out the posts tags
tags = item['tags'];
//loop through the tags
for (i = 0; i < tags.length; i++)
{
tag = tags[i];
//if the tag already exists in the tag array
if (temptagarray[tag])
{
temptagarray[tag] = temptagarray[tag] + 1;
}
else
{
temptagarray[tag] = 1;
}
}
});
if (data.response.posts.length == 20) {
retrieve_more(offset + 20);
}
});
};
retrieve_more(0);
}
loadPosts();
document.write(JSON.stringify(temptagarray));
</script>
Thanks in advance
Garrett
Replace this:
if (data.response.posts.length == 20) {
retrieve_more(offset + 20);
}
...with this:
if (data.response.posts.length == 20) {
retrieve_more(offset + 20);
} else {
document.write(JSON.stringify(temptagarray));
}
The problem you're having is that, despite your document.write(...) command being located below the ajax call in your code, the ajax call is asynchronous and thus the callback will be invoked asynchronously as well. Basically, document.write(...) is being invoked long before you've had a chance to interact with the temptagarray variable in the ajax callback.
First things first - AJAX is Async Asynchronous.
So the code block does not wait for the previous instruction to be completed before it executes the next line.
So your document.writeline would have already been executed by the time the response comes back.
Try printing that info in the success call back after the if block and you would indeed see the response.
thanks for the replies. Below is what I have now as a workable solution as the result is going to call another function anyway. Reading a little bit more I'm wondering if I should be using a callback - is it better?
<script type="text/javascript">
//load posts from a Tumblr weblog
function loadPosts () {
//api key and weblog address
var key = "api_key=9I4rZAYQCbU1o5TSMZuyrlvXiQsNxKBicCJxNK5OKZ6G9pgdim";
var api = "https://api.tumblr.com/v2/blog/garrettlynch.tumblr.com/";
//tags object
var temptagarray = {};
//all tags and each tag
var tags;
var tag;
//looping function to keep retrieving posts until all are retrieved
var retrieve_more = function (offset) {
$.getJSON(api + "posts?callback=?&filter=image&limit=20&offset=" + offset + "&" + key,function(data) {
//for each item (post) in the response
$.each(data.response.posts, function(i, item) {
//pull out the posts tags
tags = item['tags'];
//loop through the tags
for (i = 0; i < tags.length; i++)
{
//pull out each tag
tag = tags[i];
//if the tag already exists in the tag array
if (temptagarray[tag])
{
//add 1 to its count
temptagarray[tag] = temptagarray[tag] + 1;
}
else
{
//set its count to 1
temptagarray[tag] = 1;
}
}
//to test object as it gets added to
//$("#Posts ul").append('<li>' + JSON.stringify(item, ['tags']) + '</li>')
});
//if the number of posts is more than 20
if (data.response.posts.length == 20)
{
//retrieve the next 20
retrieve_more(offset + 20);
}
else
{
//call the show result function
showresult(temptagarray);
}
});
};
//stop retrieving posts
retrieve_more(0);
}
loadPosts();
function showresult(tagarray)
{
$("#Posts ul").append('<li>' + JSON.stringify(tagarray) + '</li>');
//document.write(JSON.stringify(tagarray));
}
</script>

Categories

Resources