Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Really simple Vanilla JS question: I've got a list of things like this:

code:


<h3 class="faq-question">This is a question?</h3>
<p class="faq-answer">This is an answer.</p>

<h3 class="faq-question">This is a question?</h3>
<p class="faq-answer">This is an answer.</p>

<h3 class="faq-question">This is a question?</h3>
<p class="faq-answer">This is an answer.</p>

.faq-answer is set display: none. Trying to have it where if you click on a .faq-question, the next instance of .faq-answer gets a class added to have it display: block. This is what I've come up with, but it doesn't work:

code:


const faqQuestions = document.querySelectorAll('.faq-question');

[...faqQuestions].forEach(function(item) {
	item.addEventListener('click', function(event) {
		document.querySelector('.faq-answer').nextElementSibling.classList.add('faq-show');
	});
});

I'm probably missing something simple.

# ? Oct 16, 2019 16:41

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 04:28

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Arrays are indexed, and the callback to forEach takes the index as the second argument, so just select the next index?

# ? Oct 16, 2019 17:22

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

LifeLynx posted:

Really simple Vanilla JS question: I've got a list of things like this:
code:
<h3 class="faq-question">This is a question?</h3>
<p class="faq-answer">This is an answer.</p>

<h3 class="faq-question">This is a question?</h3>
<p class="faq-answer">This is an answer.</p>

<h3 class="faq-question">This is a question?</h3>
<p class="faq-answer">This is an answer.</p>
.faq-answer is set display: none. Trying to have it where if you click on a .faq-question, the next instance of .faq-answer gets a class added to have it display: block. This is what I've come up with, but it doesn't work:
code:
const faqQuestions = document.querySelectorAll('.faq-question');

[...faqQuestions].forEach(function(item) {
	item.addEventListener('click', function(event) {
		document.querySelector('.faq-answer').nextElementSibling.classList.add('faq-show');
	});
});
I'm probably missing something simple.

You just want to do event.target.nextElementSibling.classList.add('faq-show'); since the event will tell you which element was clicked and you just want the next one in document order. Re-querying the whole document will 'start from the top' every time, not from the event target, since document is, well, the whole document.

Example: https://jsfiddle.net/zn5qctLj/

# ? Oct 16, 2019 17:27

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

also consider looking into the summary and details elements if the compat matrix looks okay for you

https://caniuse.com/#feat=details

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

# ? Oct 16, 2019 18:19

FSMC: Apr 27, 2003; I love to live this lie

How do I easily section of code into seperate blocks? I'm just writting <code>// Section name ----------------------</code> manually. I'm 99% sure there is a short cut or something to save me from manually writing all those dashes and then modififying them when I change them. With JSDOC I just write /** enter and it autocomples most stuff. What's the equivilent for making section headers, or should each roughly group functions in be seperate files?

# ? Oct 21, 2019 00:44

The Fool: Oct 16, 2003

Maybe some more context? It sounds like you might want region folding which is editor specific.

I use vscode and do this:

code:

//#region
Some code
//#endregion

https://code.visualstudio.com/docs/editor/codebasics#_folding

# ? Oct 21, 2019 00:49

FSMC: Apr 27, 2003; I love to live this lie

The Fool posted:

Maybe some more context? It sounds like you might want region folding which is editor specific.

I use vscode and do this:
code:
//#region
Some code
//#endregion
https://code.visualstudio.com/docs/editor/codebasics#_folding

I want to be able to add somekind of comment that the outline view would then see eveyrthing between them as a group. With JSDoc its quite simple, surefly there is an extension or someting simple for section titles or whatever. I kind of want tags that are visiual and break up the source code but also folding might be useful. So you can clearly hae the anxilliary functions in the same place. Here is an example, you may not be want to see what the code does. I mainly trying to figuire out the best way use section headers, could I minimise all the code I'm, not working at.

code:

// #Region 
//Formating and case functions
/**
 * Creates a list of tags using various cases(lower/upper)
 * 
 * Depending on browser and software used tag cases may be treated differently
 * 
 * @param {string} inString of an ixbrl tag
 * @returns list of ixbrl tag but using various cases
 */
function getCases(inString) {
  dprint('Start getCases');
  if (isIE()) {
    return [inString, inString.replace('ix:', '')];
  }
  return [inString, inString.replace('ix:', ''), inString.toLowerCase(), inString.toLowerCase().replace('ix:', ''), inString.toUpperCase().replace('IX', 'ix'), inString.toUpperCase().replace('IX', '')];
}

/**
 * 
 * @param {string} tag name 
 * @param {color} color to highlight 
 */
function highlightCases(tag, color) {
  dprint('Start highlightCases');
  const tags = getCases(tag);
  for (let i = 0; i < tags.length; i += 1) {
    highlightTagChains(tags[i], color);
  }
}
//'// #Region 
//Formating and case functions
/**
 * Creates a list of tags using various cases(lower/upper)
 * 
 * Depending on browser and software used tag cases may be treated differently
 * 
 * @param {string} inString of an ixbrl tag
 * @returns list of ixbrl tag but using various cases
 */
function getCases(inString) {
  dprint('Start getCases');
  if (isIE()) {
    return [inString, inString.replace('ix:', '')];
  }
  return [inString, inString.replace('ix:', ''), inString.toLowerCase(), inString.toLowerCase().replace('ix:', ''), inString.toUpperCase().replace('IX', 'ix'), inString.toUpperCase().replace('IX', '')];
}

/**
 * 
 * @param {string} tag name 
 * @param {color} color to highlight 
 */
function highlightCases(tag, color) {
  dprint('Start highlightCases');
  const tags = getCases(tag);
  for (let i = 0; i < tags.length; i += 1) {
    highlightTagChains(tags[i], color);
  }
}

FSMC fucked around with this message at 01:34 on Oct 21, 2019

# ? Oct 21, 2019 01:25

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

FSMC posted:

I kind of want tags that are visiual and break up the source code but also folding might be useful. So you can clearly hae the anxilliary functions in the same place. Here is an example, you may be want to see what the code does. I mainly trying to figuire out the best way use section headers, could I minimise all the code I'm, not working at.

This is a box that I want to give it as section title but don't really know how, it would be great to have the outline based on the header to quickly find what you want.
Ir an I going around this somepletely the wrtong way home. IT seems like there but be a short key which would make a header rather than me holding a button for a min or so.

I can barely parse the grammar/spelling of this post and I gave up.

# ? Oct 21, 2019 01:32

FSMC: Apr 27, 2003; I love to live this lie

Thermopyle posted:

I can barely parse the grammar/spelling of this post and I gave up.

ME to and gave it a quick rewrite

# ? Oct 21, 2019 01:35

Tanners: Dec 13, 2011; woof

FSMC posted:

How do I easily section of code into seperate blocks? I'm just writting <code>// Section name ----------------------</code> manually. I'm 99% sure there is a short cut or something to save me from manually writing all those dashes and then modififying them when I change them. With JSDOC I just write /** enter and it autocomples most stuff. What's the equivilent for making section headers, or should each roughly group functions in be seperate files?

Having files with so much functionality stuffed into them that you need to demarcate the different sections is usually a code smell, and I think you're on the right track with splitting them into separate files. How big are the files you're typically splitting up into sections? How do you normally decide when to split things out into their own section?

# ? Oct 21, 2019 02:33

Cheen: Apr 17, 2005

FSMC posted:

ME to and gave it a quick rewrite

Still difficult to understand.

# ? Oct 22, 2019 00:28

The Fool: Oct 16, 2003

FSMC posted:

I want to be able to add somekind of comment that the outline view would then see eveyrthing between them as a group.

Still sounds like #region's

# ? Oct 22, 2019 00:40

darthbob88: Oct 13, 2011; YOSPOS

I'm doing my first project using Firebase, just a simple little web frontend for a database so my family can make suggestions for my next project. I'm pretty sure I'm doing something wrong, because I've gotten it working on my local machine, but when I push my changes up to Github, CI keeps timing out in the test step. I've managed to nail it down to the part where I actually read data from the database, so I think it's because I don't close the connection, but I'm not sure how to do that.

I'm also not sure about the addNewIdea method; there's got to be some better way to convert docRef back into a document to add to the state.

code:

import * as firebase from "firebase";

var firebaseConfig = {
   <config>
  };
firebase.initializeApp(firebaseConfig);
export const databaseRef = firebase.firestore();

code:

import React, { Component } from "react";
import IdeaTable from "../IdeaTable/IdeaTable";
import Idea from "../models/Idea";
import NewIdeaForm from "../NewIdeaForm/NewIdeaForm";
import { databaseRef } from "../firebase";

export default class IdeaListPage extends Component<{},  { listOfIdeas: Idea[] }> {
  constructor(props: any) {
    super(props);
    this.state = {
      listOfIdeas: []
    };

    //TODO: Turn this into a real-time watcher, so it gets automatically updated.
    //TODO: Pull this into a separate ideasService
    /* It's this stuff that's breaking everything.
     *  databaseRef
     *   .collection("ideas")
     *   .get()
     *   .then(querySnapshot => {
     *     querySnapshot.forEach(doc => {
     *       const newIdea = {...doc.data(), id: doc.id} as Idea;
     *       // console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
     *       this.setState({listOfIdeas: [...this.state.listOfIdeas, newIdea]})
     *     });
     *   });
     */
  }
  
  addNewIdea = (newIdea: Idea) => {
    const oldIdeas = this.state.listOfIdeas;
    databaseRef
      .collection("ideas")
      .add(newIdea)
      .then(docRef => {
        this.setState({
          listOfIdeas: [...oldIdeas, newIdea]
        });
      })
      .catch(function(error) {
        console.error("Error adding document: ", error);
      });
  };

  render() {
    return (
      <React.Fragment>
        <IdeaTable listOfIdeas={this.state.listOfIdeas} />
        <NewIdeaForm addNewIdea={this.addNewIdea} />
      </React.Fragment>
    );
  }
}

# ? Nov 10, 2019 23:05

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

Have you ever successfully run simple tests through Github's CI? Are the tests attempting to connect to a real Firebase server? It's entirely possible that the test runner is in a system configured by Github to prevent most outbound connections.

You might prefer not to set up a replacement for the real Firebase to use for testing in Github�s CI environment but you may or may not be able to access the real Firebase when running tests in that environment.

# ? Nov 10, 2019 23:26

darthbob88: Oct 13, 2011; YOSPOS

prisoner of waffles posted:

Have you ever successfully run simple tests through Github's CI? Are the tests attempting to connect to a real Firebase server? It's entirely possible that the test runner is in a system configured by Github to prevent most outbound connections.

You might prefer not to set up a replacement for the real Firebase to use for testing in Github�s CI environment but you may or may not be able to access the real Firebase when running tests in that environment.

Nah, the tests are just simple "It should render" and "It should match the snapshot" things, and I forgot to even have tests for that component. On top of that, the tests actually do pass, CI just never proceeds to the next step.

# ? Nov 11, 2019 00:09

Agrikk: Oct 17, 2003; Take care with that! We have not fully ascertained its function, and the ticking is accelerating.

Can soneome help me figure out why my files are corrupted after being uploaded to an S3 bucket?

After missing a bunch of files due to a crashed process, I've decided to take the plunge and write my first Lambda function that pulls data from a web address every hour and dumps it into an S3 bucket for eventual processing.

I've managed to cobble together the following script in node.js and it manages to pull the file and shove it into S3, but it arrives un-extractable and corrupted:

code:


var AWS = require('aws-sdk');
var https = require('https');
var s3 = new AWS.S3();

var url = 'https://apps.foldingathome.org/daily_team_summary.txt.bz2';

exports.handler = function(event, context) {
  https.get(url, function(res) {
    var body = '';
    res.on('data', function(chunk) {
      // Agregates chunks
      body += chunk;
    });
    res.on('end', function() {
      // Once you received all chunks, send to S3
      var str1 = 'FAH/teams/daily_team_summary.';
      var str2 = '.txt.bz2';
      var NEW_KEY = str1.concat(Date.now(), str2);
      var params = {
        Bucket: 'S3-DESTINATION',
        Key: `${NEW_KEY}`,
        Body: body
      };
      s3.putObject(params, function(err, data) {
        if (err) {
          console.error(err, err.stack);
        } else {
          console.log(data);
        }
      });
    });
  });
};

I grabbed code snippets from all over and put it together and I'm the first to admit that I barely know what I'm doing here. Please help?

# ? Nov 18, 2019 07:20

Tanners: Dec 13, 2011; woof

Just clarifying, the files youre pulling from that url are already compressed right? With bz2?

# ? Nov 19, 2019 03:16

necrotic: Aug 2, 2005; I owe my brother big time for this!

You may need to use a Buffer instead of a String to hold onto the body so you can pipe it as binary instead of whatever JS is doing under the hood when concatenating to a string.

Depending on the size of the file you're downloading you may also want to look into streaming the download into the S3 upload so you don't have to save it all in memory before writing to S3.

# ? Nov 19, 2019 04:46

spiritual bypass: Feb 19, 2008; Grimey Drawer

I haven't been seriously into Javascript since, like, 2014. What's the best reading material (online or printed) to get me caught up on how all this poo poo works now?

For context, I'm writing a web UI using Svelte. I find myself developing my own idioms for dealing with promises and such with no idea what the standard idioms are, if they even exist.

# ? Nov 19, 2019 19:26

MrMoo: Sep 14, 2000

~~Anybody know why Chrome fails miserably when trying to profile a page with a SharedWorker?~~

Ha, my magical code destroys the profiler, fixed something else and now it actually works. Awesome.

MrMoo fucked around with this message at 20:32 on Nov 19, 2019

# ? Nov 19, 2019 19:56

susan b buffering: Nov 14, 2016

rt4 posted:

I haven't been seriously into Javascript since, like, 2014. What's the best reading material (online or printed) to get me caught up on how all this poo poo works now?

For context, I'm writing a web UI using Svelte. I find myself developing my own idioms for dealing with promises and such with no idea what the standard idioms are, if they even exist.

I�m partial to MDN, myself.

# ? Nov 20, 2019 00:03

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

I was in a similar position a year ago. The landscape since 2014 has changed so much, and now it feels essential to use tools like Babel and Webpack. But there's so many tools that it's overwhelming. I found it useful to install a framework where it was all setup for me. I think create_react_app does that; even though it's suited towards teaching React, it also sorts out installing node modules, and has a starter config for Webpack, Babel, and JSX, so you can get to experimenting with new JS features quickly.

As for the newer JS features, there's a million articles that summarize them if you google "Ecmascript 2018 new features". And seconding MDN as a great resource, albeit I only use it as reference docs.

# ? Nov 20, 2019 00:14

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

If you're just getting back into things (or even if you're a veteran!) I highly, highly recommend Parcel Bundler. https://parceljs.org/

It aims to be as "zero-configuration" as possible. You can immediately start using just about any modern web technology, syntax, or framework and it will just work. Want to use React? Import React into that bitch. Like SASS? Rename your CSS files to SCSS. Want to give TypeScript a try? Rename .js/jsx to .ts/tsx. Parcel will automatically detect and install any dependencies you use and add them to package.json, and supports Babel out of the box.

https://github.com/jereddanielson/parcel-boilerplate

# ? Nov 20, 2019 06:28

The Fool: Oct 16, 2003

I�ve been using gatsby to scaffold new projects even if I�m doing a more traditional spa and not using any its other features.

# ? Nov 20, 2019 06:35

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

http://kangax.github.io/compat-table/es5/ and the links to the other versions in the top left are good as both lists of new language features and tell you whether you'll be able to actually use them :v:

# ? Nov 20, 2019 15:02

prisoner of waffles: May 8, 2007; Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the fishmech
About my neck was hung.

caniuse.com for browser support of web platform features

# ? Nov 20, 2019 15:09

NotWearingPants: Jan 3, 2006; by Nyc_Tattoo; Nap Ghost

If you're looking for something in print, I thought this was helpful: Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers

Also I took an online Udemy course on NodeJS and all the newer language stuff was covered. And I thought learning NodeJS was helpful for getting familiar with npm and the command line environment because I was previously using a framework that had its own tooling.

I have also found the free online courses on The Net Ninja playlist to be very helpful when I want an intro or to brush up on something. Sometimes paid online courses can get a lot longer than they need to be and that might be because they are trying to sell them and "35 hours of video!" is a selling point. Net Ninja courses are usually like 10-20 videos of 5-10 minutes each. Also I like his accent. I haven't done this one, but here's one on CS6 that may work for you: JavaScript ES6 Tutorials

# ? Nov 20, 2019 17:29

MrMoo: Sep 14, 2000

Wikipedia has a nice summary of changes,

https://en.m.wikipedia.org/wiki/ECMAScript

Like ECMAScript 10 provides Object.fromEntries that you can use to convert a Map to an Object. Had to use that the other day. Versions 7 through 8 have important Promise and async await features.

# ? Nov 20, 2019 18:26

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Anony Mouse posted:

If you're just getting back into things (or even if you're a veteran!) I highly, highly recommend Parcel Bundler. https://parceljs.org/

It aims to be as "zero-configuration" as possible. You can immediately start using just about any modern web technology, syntax, or framework and it will just work. Want to use React? Import React into that bitch. Like SASS? Rename your CSS files to SCSS. Want to give TypeScript a try? Rename .js/jsx to .ts/tsx. Parcel will automatically detect and install any dependencies you use and add them to package.json, and supports Babel out of the box.

https://github.com/jereddanielson/parcel-boilerplate

don't worry, configuration is coming to Parcel v2

# ? Nov 20, 2019 19:29

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

I love using Babel so that I can use many new JS features without having to wait for browser support.

MrMoo posted:

Wikipedia has a nice summary of changes,

https://en.m.wikipedia.org/wiki/ECMAScript

Like ECMAScript 10 provides Object.fromEntries that you can use to convert a Map to an Object. Had to use that the other day. Versions 7 through 8 have important Promise and async await features.

That 10 year gap between 3 and 5 always makes me laugh.

# ? Nov 20, 2019 21:57

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Thermopyle posted:

That 10 year gap between 3 and 5 always makes me laugh.

The Internet Explorer Dark Age

# ? Nov 21, 2019 16:48

Cheen: Apr 17, 2005

I'm tackling as my next ticket a refactor of an angular component. It's pretty big, over 1,000 lines, 60 variables are being stored, and a number of functions that I think I could refactor or remove. I'm considering strategies for how to go about this- I've never done a refactor like this before. Is there any reading that anyone would recommend or tips n' tricks for handling this?

Edit: I should add that the goal is not to refactor for refactoring's sake, but rather that this is one of the oldest views in the app and a lot of new functionality that is going to be added in the future is going to include it. I want to make it so that adding that new functionality is a lot easier than it currently is.

Cheen fucked around with this message at 17:16 on Nov 26, 2019

# ? Nov 26, 2019 16:55

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Cheen posted:

I'm tackling as my next ticket a refactor of an angular component. It's pretty big, over 1,000 lines, 60 variables are being stored, and a number of functions that I think I could refactor or remove. I'm considering strategies for how to go about this- I've never done a refactor like this before. Is there any reading that anyone would recommend or tips n' tricks for handling this?

Edit: I should add that the goal is not to refactor for refactoring's sake, but rather that this is one of the oldest views in the app and a lot of new functionality that is going to be added in the future is going to include it. I want to make it so that adding that new functionality is a lot easier than it currently is.

Move everything that's not directly acting on gui elements into services that you unit test, and then go you can hog wild with refactoring without worrying about breaking poo poo.

# ? Nov 26, 2019 17:29

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

I have a way of writing js in a pattern I've found is useful and readable lately and I don't know if it's a thing or if it's not good but it's a way I think works.

code:



class MyClass {
  
  
  constructor() {
    this.arrayOne = [1, 2, 3];
    this.stringOne = "1, 2, 3";
    this.init();
  }
  
  
  init() {
    this.primaryMethodOne(true);
  }
  
  
  primaryMethodOne(isString) {
    
    
    const logString = () => {
      console.log(this.stringOne);
    }
    
    const logArray = () => {
      console.log(this.arrayOne);
    }
    
    if (true) {
      logString();
    } else {
      logArray();
    }
    
  }
  
  
}

Basically all constructors fire an init which sets the class in motion once the Constructor is done, then methods are used to handle major areas of class functionality and sub functionality inside those classes are handled with expressions. I find this very readable and nice to work with.

# ? Nov 28, 2019 23:08

Tanners: Dec 13, 2011; woof

Ape Fist posted:

I have a way of writing js in a pattern I've found is useful and readable lately and I don't know if it's a thing or if it's not good but it's a way I think works.
code:
class MyClass {
  
  
  constructor() {
    this.arrayOne = [1, 2, 3];
    this.stringOne = "1, 2, 3";
    this.init();
  }
  
  
  init() {
    this.primaryMethodOne(true);
  }
  
  
  primaryMethodOne(isString) {
    
    
    const logString = () => {
      console.log(this.stringOne);
    }
    
    const logArray = () => {
      console.log(this.arrayOne);
    }
    
    if (true) {
      logString();
    } else {
      logArray();
    }
    
  }
  
  
}
Basically all constructors fire an init which sets the class in motion once the Constructor is done, then methods are used to handle major areas of class functionality and sub functionality inside those classes are handled with expressions. I find this very readable and nice to work with.

It might feel less weird with a more substantial example. I'm not really sure i get it other than using methods to name individual pieces of functionality which is cool and good.

# ? Nov 28, 2019 23:14

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

model.vehicle.get('device.type') returns a promise.
model.vehicle.get('device.type.id') returns the value of the id field directly.

Ember! :razz:

Never having any idea what type or shape the data is that I'm going to get without trial and error for the epic win!

# ? Dec 4, 2019 11:58

huhu: Feb 24, 2006

Given this type:

code:

type Bar = {
    frames: {
        timestamp: number
        participantFrames: {
            [key: string]: {
		foo: number
            }
        }
    }[]
}

Given that frames is an array, is there a way to get at the type of particpantFrames to pass in as a type arg for a function like so?

code:

const foo = (buzz: Bar['frames']['participantFrames']) => {}

Or should I save participantFrames out to its own type?

# ? Dec 8, 2019 19:50

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Is there a way to use some kind of a background worker script (similar to a service worker or a web worker) in TamperMonkey?

I have a script that does some heavy processing when I press a button and currently it blocks the UI long enough that Firefox starts complaining about a script slowing the page down. It's not a huge deal since this script is for my own use, but I'd like to get rid of it if possible anyway.

# ? Dec 9, 2019 12:49

The Fool: Oct 16, 2003

I'm trying to figure out a way to modify a dom element that is in an iframe that loads 1-2 seconds after the rest of the page. The code below works if I paste it into the console after the page has loaded, but I haven't figured out a reliable way to load it automitically.

document.onload complains about the element not existing. I've been experimenting with MutationObserver, but haven't been able to get it to work yet.

code:

var iframe = document.getElementById("contentIFrame0")
var segment = iframe.document.getElementById("targetdiv")
var value = '"' + segment.attributes[3].value.split("\n")[1] + '"'
var btn = "<button onclick='window.open(" + value + "); return false;'>Launch</button>";
segment.innerHTML = btn

The Fool fucked around with this message at 06:38 on Dec 11, 2019

# ? Dec 11, 2019 01:44

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 04:28

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

The Fool posted:

I'm trying to figure out a way to modify a dom element that is in an iframe that loads 1-2 seconds after the rest of the page. The code below works if I paste it into the console after the page has loaded, but I haven't figured out a reliable way to load it automitically.

document.onload complains about the element not existing. I've been experimenting with MutationObserver, but haven't been able to get it to work yet.
code:
var iframe = document.getElementById("contentIFrame0")
var segment = iframe.contentWindow.document.getElementById("contentIFrame0").contentWindow.document.getElementById("targetdiv")
var value = '"' + segment.attributes[3].value.split("\n")[1] + '"'
var btn = "<button onclick='window.open(" + value + "); return false;'>Launch</button>";
segment.innerHTML = btn

I'm tired and too lazy to see if the first approach is valid, but I would either:

1. Plop an event handler on the iFrame to see when it is done loading
2. Check for `segment` existing, if it does not, sleep a bit and check again in a loop until it's there (failing completely after X seconds.)

# ? Dec 11, 2019 03:51

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »