Freelance Projects, Design and Programming Tutorials
I’m working on a simple web page where a button click should update the content of a using JavaScript. Here’s my code:
But when I click the button, nothing happens. No errors in the console either. I’ve double-checked the function name and element IDs. Am I missing something obvious here?
What I’ve tried:
Ensured the script is at the bottom of the body
Checked the browser console for errors
Tried textContent instead of innerHTML
Any help is appreciated
I’m trying to double each number in an array using forEach, but the original array isn’t changing. Here’s my code:
const numbers = [1, 2, 3];
numbers.forEach((num) => {
num = num * 2; // Doubling the value
});
console.log(numbers); // Output: [1, 2, 3] (unchanged)Expected Output:
[2, 4, 6]
What I’ve Tried:
Used map() instead (works, but I want to understand forEach).
Tried accessing the array by index:
numbers.forEach((num, index) => {
numbers[index] = num * 2; // This works, but why doesn’t the first approach?
});
console.log(numbers);I’m building a multi-step form for a simple web app. Each step has input fields that require validation (e.g., required fields, email format). If a user refreshes the page, I want to:
Keep the form data intact (already using localStorage for this).
Restore any validation error messages that were previously displayed (e.g., “Email is required”).
Right now, the data is being saved and restored correctly using localStorage, but I can’t figure out how to save the validation state or messages and reapply them when the page reloads.
// Saving form data
const form = document.querySelector("form");
form.addEventListener("input", () => {
localStorage.setItem("formData", JSON.stringify({
email: form.email.value
}));
});
// Validating and showing error
form.addEventListener("submit", (e) => {
if (!form.email.value) {
e.preventDefault();
document.getElementById("emailError").textContent = "Email is required";
}
});
I’m trying to fake the request with Nock library in my React application (Webpack), but i get errors: “assert is not defined” and, after adding ‘assert’ package, “process is not defined” where i require or import ‘nock’.
require('nock')
.nock('...')
.post('...')
.reply(200, {
myName: 'asdasd'
});
util.js:109 Uncaught ReferenceError: process is not defined
at ./node_modules/util/util.js (util.js:109:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/assert/build/internal/assert/assertion_error.js (assertion_error.js:25:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/assert/build/assert.js (assert.js:39:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
I have multiple files that I am trying to process back to back using ffmpeg.wasm. I have noticed that after around ~150 runs, a memory issue comes up: RuntimeError: memory access out of bounds. I tried doing cleanup using ffmpeg.deleteFile() on both the input and output files after every run, but that didn’t make a difference. Is there something I am missing that will allow me to reuse the ffmpeg instance as many times as I want?
If I can avoid it, I do not want to have to call ffmpeg.terminate() after each use since loading ffmpeg for the next use takes a long time (~.5 secs on my test machine).
Note: I am using the updated ffmpeg.wasm v0.12+ in a browser setting
npm error could not determine executable to run
npm error A complete log of this run can be found in: C:UsersDellAppDataLocalnpm-cache_logs2025-04-24T17_55_27_717Z-debug-0.log
I am new to Agora.io but I am aware of webRTC and have built plenty of applications over it I want to do some open source contribution and found Agora but it is huge idk where to start from.
Support from someone in community.
I am trying to write some code that parses through a section of XML and deletes the entry when some criteria are met.
What I have below is getting to the point where I see my “HIT” channelMap, but it is not actually deleting the entry. Does anyone know what I am missing here?
for each(var entry in msg..component.section.(code.@code == "47519-4").entry){
for each(var obs in entry.observation.(@classCode == "OBS").(@moodCode == "EVN")){
if([email protected]() != "" && [email protected]() != "" && [email protected]() != ""){
channelMap.put('HIT', 'HIT')
delete entry
}
}
}
I’m trying to use event.preventDefault() on a submit button inside a form that gets added to the page dynamically using JavaScript. However, it doesn’t seem to work—the form still submits and the page reloads.
I am writing a Nextra Docs page for an API documentation. On the left side is the Nextra “navbar” Component that usually has links to the single .mdx pages of the documentation.
However in my case, I would like to have one single page for the whole API documentation and add anchor tags to the navbar Component, instead of using links to the single pages. This way the user just scrolls down a single page and uses the anchor tags to skip to desired sections.
Ideally i would like to see all relevant anchor tags below “Overview” in the screenshot, preferably being able to nest them in “subfolders” which contain other anchor tags.
I had no problems creating such a navigation with single .mdx files and using the ‘_meta.js’ file to arrange them and rename them, however this does not work with anchor tags.
Any ideas on how to solve this?
This is my current code:
layout.jsx
import { Footer, Layout, Navbar } from 'nextra-theme-docs'
import { Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-docs/style.css'
export const metadata = {
// Define your metadata here
// For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
}
const navbar = (
<Navbar
logo={<b>API Documentation</b>}
// ... Your additional navbar options
/>
)
const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>
export default async function RootLayout({ children }) {
return (
<html
// Not required, but good for SEO
lang="en"
// Required to be set
dir="ltr"
// Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
suppressHydrationWarning
>
<Head
// ... Your additional head options
>
{/* Your additional tags should be passed as `children` of `<Head>` element */}
</Head>
<body>
<Layout
navbar={navbar}
pageMap={await getPageMap()}
docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
footer={footer}
>
{children}
</Layout>
</body>
</html>
)
}
_meta.js
export default {
index: 'Overview',
// You can use JSX elements to change the look of titles in the sidebar, e.g. insert icons
}
// Custom component for italicized text
function Italic({ children, ...props }) {
return <i {...props}>{children}</i>
}
next.config.js
// next.config.js
import nextra from 'nextra'
const withNextra = nextra({
})
export default withNextra()
This is my current project structure, I am using the app router.
I usually create OneNote APIs while looking at this site (https://learn.microsoft.com/ja-jp/javascript/api/onenote?view=onenote-js-1.1), but I’m having trouble with copyToNotebook().
It says that the argument is wrong, but I put a variable of type OneNote.Notebook as specified.
I can’t do another copyToSection(destinationSection) either.
I get the same thing with the wrong argument, but it should be there.
Both use the exact same code as the sample code in the official reference.
What are some possible things that could be happening?
If not, what other code should I use to get the same behavior?
Thank you in advance.
Code
async function deleteInfo() {
await OneNote.run(async (context) => {
const app = context.application;
// Gets the active Notebook.
const notebook = app.getActiveNotebook();
// Gets the active Section.
const section = app.getActiveSection();
let newSection;
await context.sync();
try {
const newSection = section.copyToNotebook(notebook);
newSection.load('id');
await context.sync();
console.log(newSection.id);
} catch (copyError) {
console.error(copyError);
if (copyError.debugInfo) {
console.error("Debug Info:", JSON.stringify(copyError.debugInfo, null, 2));
}
if (copyError.innerError) {
console.error("Inner Error:", JSON.stringify(copyError.innerError, null, 2));
}
}
});
}
Error
Debug Info: {
"code": "InvalidArgument",
"message": "InvalidArgument",
"errorLocation": "Section.copyToNotebook",
"statement": "var copyToNotebook = v.copyToNotebook(...);",
"surroundingStatements": [
"var v = context.root._getObjectByReferenceId("{70f32172-415d-4679-abad-71d6bbbacf0b}{13}");",
"var v1 = context.root._getObjectByReferenceId("{70f32172-415d-4679-abad-71d6bbbacf0b}{12}");",
"// >>>>>",
"var copyToNotebook = v.copyToNotebook(...);",
"// <<<<<",
"// Instantiate {copyToNotebook}",
"copyToNotebook.load(["id","name"]);"
],
"fullStatements": [
"Please enable config.extendedErrorLogging to see full statements."
]
Tried:
Tried to track down the cause of the error with error handling, but could only find what was described in the problem description.
What I expected to happen:
A section and a page within it can be created as a new section in the same notebook
What actually happened:
InvalidArgument Error
I am trying to automate adding products to my Wix website via their REST API. I have successfully added items but I am struggling with the image section. I have read and tried implementing all of the documentation on their wix api page. My images are stored in google drive and I have no issue getting them from there any more. I did have issues for a bit with the download link for them being a redirect and causing issues but I think that is fixed.
Here is what I have learned: Add product api does not allow adding images, you have to add them to the wix media manager first then you can link them to the product via a different api call. I believe I have to get a upload url to allow this (api call to get this link). I have tried this but I keep getting a 403 Permissions error. I tried testing their built in “Try Me!” on the wix dev page but it is broken as well. Here is the link to the api documentation I am testing but cannot get to work: https://dev.wix.com/docs/rest/assets/media/media-manager/files/generate-file-upload-url
Is this the correct way to be doing it?
TL;DR Anyone have help on how to add images to wix via REST API?
I have tried the REST API, and built in VELO HTTP calls. I have tried getting the upload url but cannot even get postman to return that it works but I can use it to get all products so I know my api key is working
On the same computer (iMac Pro using NVIDIA GeForce GT 710 – 2GB) I have built a simple WebGL application. It displays a few circles (created using triangles – each from centre to points on the circumference at many angles).
However one circle (the yellow one) is position differently on Chrome and Safari. Do you know why?
The public url is: https://yumainc.tech/webgl/issue/index.php
The main piece of code is :
const cs = new Circle(canvas)
cs.setContext(gl)
cs.setAspect(aspect)
cs.setColor(colors.yellow.rgba)
var csAngle = { xy: Math.PI / 2, zx: 0, zy: 0 },
radius = { x: base.getRadius().x * 3 / 4, y: base.getRadius().y * 3 / 4 },
x = radius.x * Math.cos(csAngle.xy),
y = radius.x * Math.sin(csAngle.xy)
cs.setCenter( { x: base.getCenter().x + x, y: base.getCenter().y + y } )
cs.setProgram(program)
cs.setRadius( { x: base.getRadius().x / 4, y: base.getRadius().y / 4 } )
cs.setSolid(true)
cs.drawCircle()
which calls a class I built, however it’s too long to show here. I hope you can view it in the web inspector.
In both cases the red circle always appears in the correct position – in the middle of the orange circle. Why is the yellow circle misaligned?
I want to make private function for my language interpreter .
problem is with that i have some variables and functions i want not to be executed by the user
for example
function run1(){
alert("1")
}
var name=0;
let exported= privaterun( ["run1()"] , function(){
export=20
console.log(name) // undefined
run1() // run1 is not defined
},["export"] )
alert(exported.export);
this is a example what i want to implement this doesn’t needs to look like this but i want have that behavior
yeah i know it could be done by making javascript interpreter in javascript but that nonsense for me for example make for loop and to every variable and function name add _1
it will still be possible to skip it somehow by the user .
and and will not be able to use variables with _1
i need a function or example to do that i use
let system;
function sandbox_wrapper(
system2, gl, c5tx, ox, oy, mouseX, mouseY, screenX, screenY,screenW, screenH, mouseAction, state, win) { const system = { system2, gl, c5tx, ox, oy,
mouseX, mouseY, screenX, screenY,
screenW, screenH, mouseAction, state, win};
function runner(code) {
try {const sandboxedFn = new Function("sys", `with (sys) {${code}}`); sandboxedFn(system);} catch (e) {}
}
return {run: runner, }
}
system = sandbox_wrapper( 1, this.gl, c5tx, this.x, this.y, this.mouseX, this.mouseY, this.x,this.y ,this.w,this.h , this.mouseAction, this.state ,this);
system.run(parsedcode);
but this doesn’t prevent for executing global functions and editing global variables .
is there way to do that ??
i would
Estoy desarrollando una aplicación web con React que necesita hacer varias llamadas a distintas APIs al mismo tiempo (por ejemplo, para cargar datos de usuario, estadísticas y configuraciones iniciales). Me preocupa que esto afecte el rendimiento general de la app o cause bloqueos al renderizar.
¿Qué buenas prácticas recomiendan para gestionar múltiples peticiones de forma eficiente?
He escuchado sobre el uso de Promise.all, React Query, useEffect con control de dependencias, pero me gustaría saber:
¿Cuál método prefieren y por qué?
¿Cómo evitan renderizados innecesarios?
¿Recomiendan alguna librería externa para este tipo de casos?
Cualquier consejo, ejemplo o experiencia es bienvenido.