Category: javascript

it seems like, when a div tag is added between the following code:

 <div id="fixed-drop">
  <button type="button" class="dropdown-btn">Show;</button>
  </div>

The following Javascript code is not able to get the item, failing with

Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')

But if that div tag is deleted, javascript is able to grab the button:
I have tried the following js codes:

  var dropdown = document.getElementById("fixed-drop").document.getElementsByClassName("dropdown-btn");

  var dropdown = document.getElementById("fixed-drop")[0].document.getElementsByClassName("dropdown-btn");

Without div this works:

  var dropdown = document.getElementsByClassName("dropdown-btn");

My test string are following

2s, 5s
2s, 5.5s

I am trying to write a regex that matches any integer or decimal after ,

I can separately write

(?<=, )d.d

which would return 5.5

or write

(?<=, )d

which would return 5

How can I combine both of them?

I tried this which does not work

(?<=, )d||d.d

Going in circles here and hope someone can help guide me. Trying to build an array from a query to later use for a grid table. However, something I am unfamiliar with happens when I try to console.log using the array after the awaited section.

console.log(strandTable.length) comes back as 0.
console.log(strandTable) comes back with some empty square brackets [], but when I expand it shows all my data. So all the data is first in a NULL section.

when I try console.log(strandTable[0]) I get an undefined.

    async function viewStrandInfo() {

      var strandTable = []

      let cableObjectId = view.popup.selectedFeature.attributes.OBJECTID

      let bufferQuery = {
        outFields: ["OBJECTID", "BUFFERTUBENUMBER", "BUFFERTUBECOLOR", "BUFFERTUBENAME"],
        relationshipId: fibrecableLayer.relationships[0].id,
        objectIds: cableObjectId
      }

      let buffers = await fibrecableLayer.queryRelatedFeatures(bufferQuery)

      await buffers[cableObjectId].features.forEach((buffer) => {
        let bufferObjectId = buffer.attributes.OBJECTID

        let strandQuery = {
          outFields: ["OBJECTID", "FIBERNUMBER", "FIBERCOLOR", "ADMINLABEL", "STATUS", "OWNER", "ADMINISTRATOR", "HOT_CIRCUIT_ID", "COMMENTS", "RESERVEDFOR"],
          relationshipId: buffTable.relationships[0].id,
          objectIds: bufferObjectId
        }

        buffTable.queryRelatedFeatures(strandQuery).then((result) => {
          result[bufferObjectId].features.forEach((strand) => {
            strandTable[strand.attributes.FIBERNUMBER] = {
              strand: strand.attributes.FIBERNUMBER,
              buffer: buffer.attributes.BUFFERTUBENUMBER,
              adminlabel: strand.attributes.ADMINLABEL,
              status: strand.attributes.STATUS,
              owner: strand.attributes.OWNER,
              admin: strand.attributes.ADMINISTRATOR,
              cctid: strand.attributes.HOT_CIRCUIT_ID,
              comments: strand.attributes.COMMENTS,
              reservedfor: strand.attributes.RESERVEDFOR    
            }
          })
        })
      })

      console.log(strandTable.length)
      console.log(strandTable)

    };

I am learning the reduce function and it’s capabilities however I cannot seem to figure out how to use it with dictionaries.

For example, I have the following dictionary:

const scores = [
    {
        team: 'A',
        score: 20
    },
    {
        team: 'B',
        score: 17
    },
    {
        team: 'C',
        score: 23
    },
    {
        team: 'D',
        score: 13
    }
]

I want to add all the values score in the neatest way possible, I have tried approaching this myself with:

const test = scores.reduce((first_item, second_item) =>{
    console.log(first_item.score, second_item.score)
    return first_item.score + second_item.score

}
)

However, it doesn’t add up the values, and it seems to only work for the first two values in the dict. What’s an easier alternative that would work for larger dictionaries on a smaller line of code? as I see it, I would have to keep including variables in the reduce function to match the number of keys.

According to the docs, a react synthetic event is a

a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Why is it important that the events work the same in every browser if their interface is always the same (as implied by ‘It has the same interface as the browser’s native event’)? Dose the fact that React uses event delegation make this nesessary somehow?

I am trying to use mediaDevices.getUserMedia to retrieve a portrait orientation media stream, specifically in 9×16 aspect ratio. I am able to do so on Android Chrome and Desktop, but iOS seems to be rotating the video when rendered in an HTML Video tag or recorded to MP4.

Here’s specifically the constraints I am using:

navigator.mediaDevices.getUserMedia({
  video: { 
    aspectRatio: 9/16, 
    facingMode: 'user',
    width: { min: 360, ideal: 720, max: 1080 },
    height: { min: 640, ideal: 1280, max: 1920 },
    deviceId: undefined,
    resizeMode: 'none'
   }
  })

This will return me a Media Stream video track with the desired properties:

mediaStream.getVideoTracks()[0]

{
   deviceId: "..."
   facingMode: "user"
   frameRate: 30
   height: 1280
   width: 720
}

I then render that stream on an HTML Video tag. When I do so, the video is rendered rotated so that the video.videoWidth = 1280 and video.videoHeight = 720.

I understand from other posts that MP4 and WEBM videos can have rotation metadata embedded, and that’s likely what is happening here.

I then use RecordRTC to record the video and the resulting video is indeed 720×1280, but rotated such that when rendering it displays as landscape format.

I am trying to prevent this rotation from happening, so that I can actually record a portrait video in 720×1280 with no rotation. Chrome (android + desktop) seems to be able to do this crop+scaling for me, but iOS does not. Is there a solution anyone has found to this?

I am trying to create a simple upload page where user can select multiple local audio file and play it. For hour, I’m not uploading this files to server, just want to play these multiple files with Tone.js Web Audio framework. I’m sill learning, so possibily i made up a frankstein code.

I have an array of these files locaded in “tracks”, when one or more files are uploaded it’ll create a new div that contains the play button. I’m usign P5.js library too. That’s the code:

const inpFile = document.getElementById("input-file");
const bttUpload = document.getElementById("upload-btt");
let tracks = [];
let tracksLength = tracks.length;

window.AudioContext = window.AudioContext || window.webkitAudioContext;
let context = new window.AudioContext();
let trackSource;

function setup() {
  createCanvas(400, 400);
  uploadTrack();
}

function draw() {
  background(220);
}

function uploadTrack() {
  bttUpload.addEventListener("click", function() {
    if (inpFile.length == 0) {
      alert("");
    } else {
      tracks.push.apply(tracks, inpFile.files);
      console.log(tracks);
      tracksDiv();
    }
  });
  
}

function tracksDiv() {
  let newTrackDiv;
  let trackSection = document.getElementById('tracks');
  for (let i = 0; i <= tracks.length; i++) {
    newTrackDiv = document.createElement('div');
    newTrackDiv.id = "tracks" + i; 
    newTrackDiv.className = 'track-div';
    newTrackDiv.innerHTML = tracks[i];
    trackSection.appendChild(newTrackDiv);

    let bttPlayTracks = document.createElement('input');
    bttPlayTracks.type = "button";
    bttPlayTracks.innerHTML = tracks[i];
    newTrackDiv.appendChild(bttPlayTracks);

    bttPlayTracks.addEventListener("click", function() {
      inpFile.addEventListener('change', selectedTrack, false);
      if (tracks[i].state == "started") {
        Tone.Transport.stop();
      } else if (tracks[i].state == "stopped") {
        Tone.Transport.start();
      }
    });
  }
}

function playSoundTrack(arraybuffer) {
  context.decodeAudioData(arraybuffer, function(buf) {
    trackSource = new Tone.BufferSource();
    trackSource.connect(context).toDestination();
    trackSource.buffer = buf;
    trackSource.start(0);
  });
}

function selectedTrack(evt) {
  for (let i = 0; i <= tracks.length; i++) {
    tracks[i] = evt.target.files;
    playFileTrack(tracks[i]);
  }
}

function playFileTrack(file) {
  let reader = new FileReader();

  reader.addEventListener('load', function() {
    playSoundTrack(e.target.result);

  });
  reader.readAsArrayBuffer(file);
}

<!DOCTYPE html><html lang="PT-BR"><head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <!-- P5.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    
    <!--Tone.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.32/Tone.js" integrity="sha512-USKCQh+O8BX/a2K06xPNTwduhmQvN/m9FhkR7PRysCRlPoqIItl7Qz3xVTZC/oIHe6g5XvnLHDUgGpRMZZTmFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  </head>
  <body>
    <div id="container">
      <nav class="navbar">
        <input type="file" id="input-file" name="upload-btt" multiple></input>
        <button id="upload-btt" name="upload-btt">upload</button>
      </nav>

      <div id="tracks"></div>
    </div>
    
    <script src="/JS/sketch.js"></script>
</body>
</html>

At the moment, this isn’t playing anything, but I want to know more how to proceed with it.

I’m trying to call a function when the first function is called, but when I try it, I receive a message telling me that the nested function is not defined

var indiceTema = 0


function darkVer(){
    if (indiceTema == 0){
        indiceTema = 1
    }else indiceTema = 0

    function mudaCor(indice){
        
        document.body.style.backgroundColor = lasColores[indiceTema][indice].corBackground
        document.getElementsByTagName("main")[0].style.background = lasColores[indiceTema][indice].corBackgroundMain
        document.getElementById("botao_form").style.background = lasColores[indiceTema][indice].corLink

        var inputCor = document.getElementsByTagName("input")
        for (index = 0; index < inputCor.length; index++){
            inputCor[index].style.background = lasColores[indiceTema][indice].corBackgroundInput
            inputCor[index].style.borderColor = lasColores[indiceTema][indice].corLink
        }

        var linkCor = document.getElementsByClassName("link_cor")
        for (var index = 0; index < linkCor.length; index++){
            linkCor[index].style.color = lasColores[indiceTema][indice].corLink
        }

        document.getElementById("dark").innerHTML = luaSolo[indiceTema]
        document.getElementById("dark").style.backgroundColor = tema[indiceTema]
        document.getElementById("dark").style.color = "#000"
        document.getElementsByTagName("h1")[0].style.color = tema[indiceTema]

        for (var index = 0; index < document.getElementsByTagName("p").length; index++){
            document.getElementsByTagName("p")[index].style.color = tema[indiceTema]
        }

        for (var index = 0; index < document.getElementsByTagName("label").length; index++){
            document.getElementsByTagName("label")[index].style.color = tema[indiceTema]
        }

    }
}

When I finish writing the mudaCor(), his name becomes a little transparent, and I have no idea how to fix it

I’ve been experimenting with ScrollTrigger in order to achieve a multistep animation.

In short, here is my expected behaviour / what I’m trying to achieve:
 

1. User scrolls down the page and .horizontalScroller__intro pins and moves down to the center of my .horizontalScroller which I’ve currently defined as end: "+=30%").
2. Once it has reached the end, as the user continues to scroll down, I now want .horizontalScroller__intro to fade out slowly.
3. Once .horizontalScroller__intro has faded out completely, I now want to fade in .horizontalScroller__items which has an opacity of 0 in the css.
4. Once .horizontalScroller__items has faded in completely, I want the user to be able to scroll horizontally.
5. Then the reverse when the user is scrolling back up
    

Current results:

1. .horizontalScroller__intro starts to fade out immediately (and is completely gone by the end position). I’m looking for .horizontalScroller__intro to start fading out after it has reached its end position. 

2. I have a separate scrollTrigger defined for the horizontal scroll (which just contains an image). When this trigger is used alongside the .horizontalScroller__intro trigger, the .horizontalScroller__intro jumps. Cannot get the .horizontalScroller__items to fade in (unsure if it doesn’t like it because it’s defined in the css?)

 
What have I tried?

• Used this demo to achieve fade out
• Used this demo to achieve basic pin
• Tried the below snippet to get intro to fade out also
   

 const tl = gsap.timeline( {
  scrollTrigger: {
    trigger: ".horizontalScroller__intro",
    start: "top",
    end: "+=30vh",
    scrub: true,
    // markers: true,
    toggleActions: "play reverse play reverse",
  }

});

tl
  .to('.horizontalScroller__intro', { autoAlpha: 1, duration: 0.5 })
  .to('.horizontalScroller__intro', { autoAlpha: 0, duration: 0.5 }, 0.5);

Appreciate I’ve asked a few questions in this post. Any help would be appreciated 🙂

Demo:

$(function() {

  let container = gsap.utils.toArray(".horizontalScroller__items");

  gsap.to(container, {
    x: () => -(document.querySelector('.horizontalScroller__items').scrollWidth - document.documentElement.clientWidth) + "px",
    xPercent: -100 * (container.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      // markers: true,
      pin: true,
      anticipatePin: 1,
      scrub: true,
      invalidateOnRefresh: true,
      refreshPriority: 1,
      end: () => "+=" + document.querySelector('.horizontalScroller__items').offsetWidth,
      onToggle: scrollTrigger => {
        scrollTrigger.refresh()
      },
    }
  });


  const tl = gsap.timeline( {
    scrollTrigger: {
      trigger: ".horizontalScroller__intro",
      start: "top",
      end: "+=30vh",
      scrub: true,
      // markers: true,
      toggleActions: "play reverse play reverse",
    }

  });

  tl
    .to('.horizontalScroller__intro', { autoAlpha: 1, duration: 0.5 })
    .to('.horizontalScroller__intro', { autoAlpha: 0, duration: 0.5 }, 0.5);


});

.spacer {
  height: 100vh;
  background: lightblue;
}

.horizontalScroller {
  padding: 60px 0;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .horizontalScroller {
    padding: 140px 0 80px 0;
  }
}
@media (min-width: 1200px) {
  .horizontalScroller {
    padding: 114px 0 80px 0;
  }
}
.horizontalScroller__intro {
  margin-bottom: 90px;
}
.horizontalScroller__header {
  margin-bottom: 17px;
}
.horizontalScroller__scroll {
  position: absolute;
  overflow: hidden;
  top: 0;
}
.horizontalScroller__items {
  position: relative;
  height: 100vh;
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<section class="spacer"></section>

<section class="horizontalScroller">

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-xxl-10">
        <div class="horizontalScroller__intro text-center index-top">
          <h2 class="horizontalScroller__header">This is the header</h2>
          <p class="horizontalScroller__standfirst mb-0 display--1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="horizontalScroller__scroll">
    <div class="horizontalScroller__items" id="horizontal-scroll">
      <img src="https://i.imgur.com/jlXz4II.png" alt="test" />
    </div>
  </div>

</section>

<section class="spacer"></section>

Note: if you comment out the second scrollTrigger you will see the pin of the intro somewhat working.

I currently have this object but I need to change the position of the keys.

const json = [
  {
    correo: "[email protected]",
    enviado: true,
    excel: true,
    fechaSolicitud: "08-10-2021",
    fechas: "[2021-07-31]",
    idCliente: 34170,
    pdf: true,
    planes:
      "[{f:25,p:110020904148}, {f:25,p:112690000002}, {f:25,p:112690000006}, {f:25,p:112690000007}, {f:25,p:112690000019}, {f:25,p:112690000025}, {f:25,p:112690000026}, {f:25,p:112690000030}, {f:25,p:112690000037}, {f:25,p:112690000038}, {f:25,p:112690000039}, {f:25,p:112690000040}, {f:25,p:112690000041}, {f:25,p:112690000042}, {f:25,p:112690000056}, {f:25,p:112690000057}, {f:25,p:112690000058}, {f:25,p:112690000059}, {f:25,p:112690000063}, {f:25,p:112690000069}, {f:25,p:112690000076}, {f:25,p:112690000083}, {f:25,p:112690000084}, {f:25,p:112690000104}, {f:25,p:112690000105}, {f:25,p:112690000108}, {f:25,p:112690000117}, {f:25,p:112690000130}, {f:25,p:112690000131}, {f:25,p:112690000132}]"
  }
];

I am trying to sort the object by the keys and I need it like this

this is what it sends me when I iterate it

correo
enviado
excel
fechaSolicitud
fechas
idCliente
pdf
planes

I need to achieve this result

fechaSolicitud
idCliente
correo
enviado
pdf
excel
fechas
planes

I show you the code I’ve been trying out

let columnsArray: any[];
    for (const key in json) {
        if (json.hasOwnProperty(key)) {
            columnsArray = Object.keys(json[key])

            columnsArray.sort()

        }
    }

here is the codesanbox if someone wants to help me enter link description here

There are a series of repeating digits those i want to capture, perhaps starting right after the decimal point or after a while. In short i have a problem with capturing

222553 in 0.00222553222553222553222553222553222553222553222553

6 in 0.166666666666666666

1 in.0.11111

with the same regexp. I have tried many that i could think of from /(d+)1/ to /(d+?d+?)1/ (which looked promising) to /(((d)3*(?!3))+?)1/ but was not able to figure it out. Could anybody help please?

I am showing an alert() message in the onkeyup event of an input element when the user presses the enter key. If the user presses Ok button or presses Enter key to close the alert box, everything is fine. But when the user presses the Escape button to close the alert, the textbox freezes. It wouldn’t be focused on, won’t be typed on, as if it is disabled.

How do I fix that?

Note: the problem won’t appear in jsfiddle

window.addEventListener('DOMContentLoaded', () => {
  document.getElementsByTagName("input")[0].onkeyup = function(event) {
    if (event.keyCode === 13) {
      alert('Press Escape Key. The textbox will freeze.');
    };

  }
});

<input placeholder="Press Enter Here" />

I currently trying to implement an OverTheAir Update for my microcontroller. I found an example which I can use. The problem is I would like to use it without access to the internet. The problem it is written in JQuery and I did not work with JQery so far. Using JQuery does not work with the project since it has no internet access.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
  <input type="file" name="update" />
  <input type="submit" value="Update" />
</form>
<div id="prg">Fortschritt: 0%</div>
<script>
  $("form").submit(function (e) {
    e.preventDefault();
    var form = $("#upload_form")[0];
    var data = new FormData(form);
    $.ajax({
      url: "/update",
      type: "POST",
      data: data,
      contentType: false,
      processData: false,
      xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener(
          "progress",
          function (evt) {
            if (evt.lengthComputable) {
              var per = evt.loaded / evt.total;
              $("#prg").html("progress: " + Math.round(per * 100) + "%");
            }
          },
          false
        );
        return xhr;
      },
      success: function (d, s) {
        console.log("success!");
      },
      error: function (a, b, c) {},
    });
  });
</script>
";

And I tryed to get the upload part with that but it seems I missing some properties or did set wrong parameters

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Upload</title>
    <script>
      async function uploadFile() {
        let formData = new FormData();
        formData.append("file", fileupload.files[0]);
        await fetch("/upload", {
          method: "POST", // *GET, POST, PUT, DELETE, etc.
          mode: "same-origin", // no-cors, *cors, same-origin
          cache: "default", // *default, no-cache, reload, force-cache, only-if-cached
          credentials: "same-origin", // include, *same-origin, omit
          headers: {
            "Content-Type": "application/json",
            // 'Content-Type': 'application/x-www-form-urlencoded',
          },
          redirect: "follow", // manual, *follow, error
          referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
          body: formData, // body data type must match "Content-Type" header
        });
        alert("The file has been uploaded successfully.");
      }
    </script>
  </head>
  <body>
    <p>Click on the "Choose File" button to upload a file:</p>

    <input id="fileupload" type="file" name="fileupload" />
    <button id="upload-button" onclick="uploadFile()">Upload</button>
  </body>
</html>

I would like to upload the new firmware which is a .bin file does that require some special settings?

I am using this example: https://github.com/espressif/arduino-esp32/blob/master/libraries/ArduinoOTA/examples/OTAWebUpdater/OTAWebUpdater.ino

I modified it alittle bit so it can be used in the access point mode.
I Can post the modified code too but since it does not work with html code there should be no error since it works with the JQuery code.
(I posted that code here too: https://forum.arduino.cc/t/why-can-i-do-not-perform-an-ota-update-when-i-am-in-the-ap-mode-it/952874/3)

Goal: Build subclasses that inherit proprieties and methods from the super class “Media”. I am testing out the new cleaner systantic sugar of the class, extends and super keywords of the ECMA 6 Syntax but throwing an error.

Issue: TypeError.

Code Thus Far

class Media{
  constructor(title){
    this._title = title;
    this._isCheckedOut = false;
    this._ratings = [];
  }
  get title(){
    return this._title;
  }
   get isCheckedOut(){
    return this._isCheckedOut;
   }
   get ratings(){
    return this._ratings;
  }
  set isCheckedOut(value){
    this._isCheckedOut = value;
  }
  toggleCheckOutStatus(){
    this._isCheckedOut = !this.isCheckedOut;
  }
  getAverageRating(){
    let ratingsSum =
      this._ratings.reduce((accumulator, rating) => accumulator + rating);
      return ratingSum / this.ratings.length;
  }
  addRating(value){
    this._rating.push(value)
  }
  }
  class Book extends Media{
     constructor(author,title,pages){
       super(title);
  }
      get author(){
        return this._author
      }
      get pages(){
        return this._pages
      }
  }
class Movie extends Media{
    constructor(director,title,runTime){
      super(title);
    }
    get director(){
      return this._director
    }
    get runTime(){
      return this._runTime
    }
    get title(){
      return this._title
    }
}
class CD extends Media{
    constructor(singer,title,runTime){
      super(title);
    }
    get director(){
      return this._singer
    }
    get runTime(){
      return this._runTime
    }
    get title(){
      return this._title
    }
}

const historyOfEverything = new Book('Bill Bryson','A Short History of Nearly Everything',544);
historyOfEverything.toggleCheckOutStatus();

console.log(historyOfEverything.isCheckedOut);
historyOfEverything.addRating([4,6,10.2,4])
console.log(historyOfEverything.getRatings()

Current Results TypeError: Cannot read properties of undefined (reading ‘push’) Unsure of why I am getting this error when the syntax for the Array method .push() is correct.

I have some question about forcing to reload page.
I have context provider who is fetching data on the first render.
I have different paths, on homepage I’m showing that fethced data.

But if user changes path (route) to for example “/about” and he come back to “/” i want to make that page will be refreshed (for fetching data on more time). Hmm, how can I achieve this?