Category: javascript

I am new to Vue and I am making a component that changes it’s class property based on the style prop given by the parent component. When I try to invoke a substitution Vue does nothing

Here is “Top.vue”, the title prop is passed and the button renders it fine, however the href and style props don’t

<script setup lang="ts">
import Button from './Button.vue'
</script>

<template>
<div class=flex>
<Button href="test" title="Home" alt="To home" style="top" />
</div>
</template>

Here is “Button.vue”

<script setup lang="ts">
defineProps({
    href: String,
    title: String,
    alt: String,
    style: String
})
</script>

<template>
<a href="{{ href }}"><button class="{{ style }}">{{ title }}</button></a>
</template>

I want for Vue to resolve this to

<a href="test"><button class="top">Home</button></a>

However it resolves to

<a href="{{ href }}"><button class="{{ style }}">Home</button></a>

Notice how {{ title }} resolves properly but {{ href }} and {{ style }} do not

I am building a JavaScript calculator as a project. Teaching myself, complete newbie here, but I got the entire code complete. HTML, CSS, JavaScript except I can figure out a situation with the “-” (negative/subtract). If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign).5 * – 5 should = -25 but I get 0. I also can not subtract negative numbers from anything, negative or positive. For example, I should be able to enter 5 – (-5) – or five-minus-negative five, but it wont allow me to enter the 2nd negative symbol before 5.

Here is the codepen :
codepen.

I seem to make an edit, and then it allows unlimited “-” or only 1.

Here is the JavaScript if anyone can see it fast:

let decimalEntered = false;

function displayScreen(value) {
const displayer = document.getElementById('display');
const lastChar = displayer.innerHTML[displayer.innerHTML.length - 1];
if (value !== '+' && value !== '-' && value !== '*' && value !== '/') {
decimalEntered = false;
}

if (value === '-' && (lastChar === '' || lastChar.match(/[+-*/]/))) {
displayer.innerHTML = displayer.innerHTML.replace(/-+/g, '');
displayer.innerHTML += value;
decimalEntered = false;
return;
}
if (value === '-' && lastChar === '-') {
if (displayer.innerHTML.length >= 2 && displayer.innerHTML[displayer.innerHTML.length - 2].match(/[+-*/]/)) {
displayer.innerHTML += value;
decimalEntered = false;
}
return;
}
if ((value === '+' || value === '*' || value === '/') && (lastChar === '+' || lastChar === '*' || lastChar === '/')) {
displayer.innerHTML = displayer.innerHTML.slice(0, displayer.innerHTML.length - 1) + value;
decimalEntered = false; // Reset the flag after adding the negative sign
return;
}
if (value === '.' && !decimalEntered) {
if (/d$/.test(displayer.innerHTML)) {
const lastNumber = displayer.innerHTML.split(/[-+*/]/).pop();
if (!lastNumber.includes('.')) {
displayer.innerHTML += value;
decimalEntered = true;
}
}
return;
}
if (displayer.innerHTML === '0' && value === '0') {
return;
}
if (displayer.innerHTML === '0' && value !== '.') {
displayer.innerHTML = '';
}
displayer.innerHTML += value;
}
function clearDisplay() {
const display = document.getElementById('display');
display.innerHTML = '0';
}
function calculate() {
const display = document.getElementById('display');
let expression = display.innerHTML;
expression = expression.replace(/([+-*/])+/g, (match, operator) => operator);
try {
expression = expression.replace(/-(d)/g, '-$1');
if (expression.startsWith('-')) {
expression = expression.replace(/^-(d)/, '($1)');
}
let result = eval(expression);
result = parseFloat(result.toFixed(4));
display.innerHTML = result;
} catch (error) {
display.innerHTML = 'Error';
}
}

I tried to change and save the XFA of some PDF files in order to fill some fields. Using pikepdf and pypdf I have access to the XFA dictionary and change values in datasets XML values, but whenever I try to save the modified XFA file using pikepdf, it disables the javascript in that PDF and it’s not possible to open it using Adobe Acrobat. Also, it is not possible to replace old XFA with the modified one using pypdf. Has anyone faced this issue or has a better solution for filling XFA PDFs?

Thanks

I’m making a request that looks like the following

request
        .post(url)
        .set('authorization', `Bearer ${token}`)
        .set('accept-encoding', 'gzip, deflate')
        .send(data)
        .end((err, res) => {
            console.log(err, res);
        });

The response from the server is compressed however with the response header content-encoding: deflate and throws the error

Error: incorrect header check
at Zlib.zlibOnError [as onerror] (node:zlib:189:17) { errno: -3, code: ‘Z_DATA_ERROR’, response: null }

How would I be able to parse a compressed response here?

So as the title says i would like the events i put on a quasar date picker to have a text/label instead of just a colored mark.

Kinda like the image attached here.
enter image description here

recently I started working on new web app in my free time.
I wanted to kindly ask if there is someone who has experience with how to make a pretty complex and ideally interactive website animation.

I want to create a 3D animation of parts of watch that will assemble when an user comes to the page. The animation might look like in this video https://www.youtube.com/watch?v=JAuRonHZiR8 (time 1:10).

And next step to ideally rotate some of the watch parts (e.g. watch pointers) when user howers over the image.

I’m currently trying to figure out which tools are the best to use for this.

I found an example of 2D text animation achieved with SVG and Javascript. But this seems like a next level and so I’m not sure what is the easiest way.

When I run a PHP script in which I want data from my change to be written to a file, I get an error in the host log Backend log: PHP Warning: file_put_contents(): open_basedir restriction in effect. File(/assets/comments/commentslist.txt) is not within the allowed path(s)

I granted all necessary permissions(

javascript

function saveCommentToFile(comment) {
    const xhr = new XMLHttpRequest();
        xhr.open("POST", "/assets/coments/save_comment.php", true); // Correct path
        var comentsave = comment;

    
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
    
    const data = "comment=" + encodeURIComponent(comentsave);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    };

    xhr.send(data);
}

php

<?php
$comment = $_POST['comment'];

$filePath = "/assets/coments/comentslist.txt";

file_put_contents($filePath, $comment . PHP_EOL, FILE_APPEND);


?>

Help solve this problem! Please

screenshot of sheet formatting

Hi all, I am trying to make a script which iterates over the cells in a spreadsheet and creates a set of folders populated with files in accordance to the specified structure. One such task is creating shortcuts, which are linked in the sheet cell. However, I am unable to get the URL associated with the shortcut.

ss = SpreadsheetApp.getActiveSpreadsheet()
var sht = ss.getSheetByName('Structure')

sht.getDataRange().setShowHyperlink(true);

nCols = sht.getLastColumn();
nRows = sht.getLastRow();


for(row=1; row < nRows+1; row++){
  for(col=1; col < nCols+1; col++){
     cell = sht.getRange(row, col)
     Logger.log(cell.getValue()+', '+cell.getRichTextValue().getLinkUrl());

I’ve tried a variety of strategies including .getRichTextValue().getLinkUrl() and other regular expression techniques. The main struggle has been that the cell’s value is considered a string, which is the title of the document, losing the hyperlink data.

execution log

From Sheets, I can do a Data Extraction to get the URL. However, I want to do this from the script end and without populating a new cell.

data extraction approach

I am getting CORS error and I am not able to load google maps. I am using Angular 8.

Initial call to load map services is successful, but the next call, it gives error.

This is how I am loading the google map

export class MapLoaderService {
  private static promise: Promise<any>;
  public static load(): Promise<any> {
    let key = "";
    const mapsUrl = `https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing,places&key=${key}&callback=__onGoogleLoaded`;

    // First time 'load' is called?
    if (!this.promise) {
      // Make promise to load
      this.promise = new Promise((resolve) => {
        this.loadScript(mapsUrl);
        // Set callback for when google maps is loaded.
        window["__onGoogleLoaded"] = ($event: any) => {
          resolve("google maps api loaded");
        };
      });
    }
    // Always return promise. When 'load' is called many times, the promise is already resolved.
    return this.promise;
  }

  //this function will work cross-browser for loading scripts asynchronously
  static loadScript(src: any, callback?: any): void {
    var s: any, r: any, t: any;
    r = false;
    s = document.createElement("script");
    s.type = "text/javascript";
    s.src = src;
    s.onload = s.onreadystatechange = function () {
      if (!r && (!this.readyState || this.readyState == "complete")) {
        r = true;
        if (typeof callback === "function") callback();
      }
    };
    t = document.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(s, t);
  }
}

and then using like:

 ngAfterViewInit() {
    MapLoaderService.load().then(() => {
      this.setupMapEvents();
    });
  }

Note: It was working few weeks back, but all of sudden, I am getting this error.

Also, on google console, I added restrictions:

this question ruined my evening.
I wanna make a simple filter for abstract clothes.
Rangę value + data-price.
When user pick range number ( 125$* or no matter ), code will counting his pick and check data-price value.
BUT I have problem.
The loop skips some items.

priceSelect.addEventListener('input', () => {
    let priceValue = document.querySelector('.price_select').value;
    document.querySelector('.price_result').innerHTML = 'Ваша цена : ' + priceValue;
    for (let f = 0; f < filterItems.length; f++) {
        let getPrice = filterItems[f].dataset['price'];
        if (priceValue < getPrice) {
            console.log('test');
        }
    }
})

For example, I specified the following condition.
If the entered number is less than the price of the item, write a test to the console. Shows 3 times when it should be 1.

enter image description here

Help me pls guys. And sry for bad eng. Thx you !

I have the Google Sheets application, I added a new tab “Edit Log” to display the logs. The logs are displayed when I edit the form in Google Sheets. How can I make them show logs when I edit directly an application —> main.JS.html that changes sheet parameters?

function onEdit(e) {
var timestamp = new Date();

var user = e.user;

var cell = e.range.getA1Notation();

var oldValue = e.oldValue;

var newValue = e.value;

var sheetName = e.source.getActiveSheet().getName();

var logSheet = e.source.getSheetByName("Edit Log");

if (logSheet == null) {

logSheet = e.source.insertSheet("Edit Log");

logSheet.appendRow(["Timestamp", "User", "Cell", "Old Value", "New Value", "Sheet Name"]);

}

logSheet.appendRow([timestamp, user, cell, oldValue, newValue, sheetName]);

}

code edits to make editing work

im pretty new to full stack development and im making a hover drop down. im not sure why but when there is nothing but the dropdown portion it works very fast but when i add the rest of the page its operation is super slow and glitchy. im not sure if this is because im using event listners or if the programming is so bad that its hurting performance. it really doesnt seem like it should be an intensive process.

• im running the site through live server
• all vanilla JS
• drop down has two classes, dropdown(when its minimised) and dropdown–active(when content is being displayed)

const servicesBtn = document.querySelector('.header__btn__services');
const dropdown = document.querySelector('.dropdown');
const dropdownItems = Array.from(document.querySelectorAll('.dropdown__item')); //select all elements that are apart of the dropdown
let delayTimeout;
let isMouseOverDropDown;

//monitors to see if the mouse is over JUST the services button
servicesBtn.addEventListener('mouseover', () => {
    clearTimeout(delayTimeout);
    dropdown.classList.add('dropdown--active');
    servicesBtn.innerHTML = 'SERVICES&#11165';
});

//monitors to see if the mouse is over the dropdown menu or any of the elements marked as dropdown items
//if the mouse is over an item isMouseOverDropDown is set to true
//it searches the array of elements marked as dropdown items to see if any match the event.target
//if isMouseOverDropDown is false then the dropdown menu is removed
document.addEventListener('mouseover', (event) => {

    isMouseOverDropDown = dropdownItems.some(item => event.target === item);

    if (!isMouseOverDropDown) {
        clearTimeout(delayTimeout);
        delayTimeout = setTimeout(() => {
            removeDropdownActive();
        }, 300);
    } else {
        clearTimeout(delayTimeout);
    }
});

function removeDropdownActive() {
    servicesBtn.innerHTML = 'SERVICES&#11167';
    dropdown.classList.remove('dropdown--active');
}

I am having a modal with a Select Menu. I am getting the id assistant_id_1 of the select menu but i am trying to get the value assistant_name to hidden input assistant_name_1 so i can use it in php code $assistant_id_1_name = $_REQUEST["assistant_name_1"];

HTML code:
<div class="form-group row">
    <label for="assistant_id_1" class="col-xs-4 col-form-label">Assistant 1:</label>
    <div class="col-xs-5 form-group">
        <input type="hidden" name="assistant_name_1" id="assistant_name_1">
        <select id="assistant_id_1" name="assistant_id_1" class="form-control select2" style="width:100%;">
            <option value="">Please Select</option>
        </select>
    </div>
</div>

JS code:
$(document).ready(function() {
    get_assistant('#assistant_id_1');
    $('#recall_modal').modal('show');
});

function get_assistant(ele, selected = 0, filter = 'None') {
    var action = "assistant";
    $.ajax({
        type: "GET",
        url: 'api/get_data.php',
        dataType: 'json',
        data: {
            action: action,
            filter: filter
        },
        success: function(result) {
            if (result.success === true) {
                html = '<option value="">Please Select</option>';
                $.each(result.assistant, function(key, value) {
                    html += '<option value="' + value.assistant_id + '"';
                    if (value.assistant_id == selected) {
                        html += ' selected';
                    }
                    html += '>' + value.assistant_name + '</option>';
                });
                $(ele).html(html);
            }
        }
    });
}

$('#assistant_id_1').change(function () {
    $('#assistant_name_1').val(('#assistant_id_1').find('option:selected').text())
})

I am getting an error Uncaught TypeError: "#assistant_id_1".find is not a function

I have the same question as this guy execpt I need to do it in html. There’s a way to set a default directory for the images used in css?

I made a website from scratch but now I need to put it on WordPress. I tried using iframe to so could just put everything in WordPress’s Media section so it would be in the same directory but turned out weird like this:the weird iframe.
I also have a GitHub repo for my website: https://github.com/maplehe7/daisyli

Cuz me and my friends be arguing about it so let me know your responses if is possible how just dm me if is possible cuz am new here and I don’t know my way around here maybe some can teach me

Nothing yet have not tried anything