Category: javascript

Category Added in a WPeMatico Campaign

An exception TypeError: Cannot assign to read only property ‘documentUrls’ of object ‘#’

I have a React App where I upload images in a Form in the UI. I am using Redux for state management and using the redux-toolkit package. In my slice file, I have a checkRemotelyUpdated function to update the form data remotely to sync with the backend. The function is:

checkRemotelyUpdated: (state, { payload: { reference, category, name, fieldName, currentValue } }) => {
      const localCheck = state.items.find((check) =>
        matchesReference(state.sync.referenceTranslations, reference, check.reference),
      )

      if (category === undefined || category === null) {
        if (localCheck) localCheck[fieldName] = currentValue
      } else {
        const finding = category.findings.find((f) => f.name === name)
        if (finding) finding[fieldName] = currentValue
      }
    },

But while I am uploading an image, the API call is happening successfully but in the console, I am getting this TypeError:
An exception TypeError: Cannot assign to read only property 'documentUrls' of object '#<Object>'
the error is pointing out to if (finding) finding[fieldName] = currentValue in this line in the code.
Here the values are:

    name: construction
    category: an object with an array of multiple findings objects
    fieldName: documentUrls
    currentValue: an array of strings, this string is the image link
    finding: {
             "name": "construction",
             "documentUrls": [],
             "remarks": "asdf",
             "status": null
    }

Why I am getting this error and what would be the way to fix this

Is it possible to remove the player WIDGET while playing audio with HTML5?

I am using the HowlerJS library to play audio in my VueJS application.

I need to play large audio files (more than 10 minutes) so I’m using HTML5Audio instead of Web Audio API.

The fact is that the widget in notifications and on the lock screen is not created with the web audio api, but with html5 it appears.
Showcase of how this player-widget looks like
I wanted to ask if it is possible to hide this widget when audio is played with html5? The platform where I publish the web application prohibits the creation of such widgets, and I cannot use the web audio api, because then users have to wait 0.5-1minute before audio will be downloaded completely.

I know they made it for better user experience, but maybe there is some way to get rid of this player-widget in notifications area?

Javascript: Uncaught SyntaxError: Identifier ‘count’ has already been declared

Though the ‘count’ variable is not declared twice, I am getting this error.

Uncaught SyntaxError: Identifier ‘count’ has already been declared

Here is the code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
    <title>Passenger Counter App</title>
</head>
<body>
    <h1>People Entered</h1>
    <h2 id="count-el">0</h2>
    <script src="index.js"></script>
</body>
</html>

JS

let count = 0
console.log(count)

OUTPUT

0
Uncaught SyntaxError: Identifier 'count' has already been declared (at index.js:1:1)

Local Variable not working as expected in JS

I am a beginner in JavaScript. I am trying to get the input’s value from a HTML file to a .js file using querySelector. As far as I know , querySelectors return a reference. so whenever I use form.reset() everything gets reset.
But since I have made a local variable i to store the input’s value , why is the form.reset() erasing the value stored in the local variable i ?

I expected the input’s value but I am getting “empty string” in the console.

enter image description here

Need JS function to run on loop for each button on the table with some variables

I am building a webrtc call button. Here is the image
enter image description here

Every button should calls the id “CallmeWidget” with a specific phone number from the table which is located in the script as “sipId”. The main fuctions work is that, when the button is pressed then the an outgoing call is occured to the specific number of the client. I dont know much of javascript. I need help is doing this.

When I tried to make duplicates of the below two scripts than the result get is this my 2nd output. The buttons are not displaying properly and not working properly

There will be lots of data in the table which will come from database, I can display that no problem. But I need to run the function properly. I would be kind if someone helps me to do this.


<div class="container">
  <div class="row">
    <div class="col-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">SL</th>
            <th scope="col">Client Name</th>
            <th scope="col">Number</th>
            <th scope="col">Call</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Client 1</td>
            <td><?php echo $number; ?></td>
            <td>
            <div id="CallScripts"></div>
            <div id="CallmeWidget"></div>
            </td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Client 2</td>
            <td><?php echo $number2;?></td>
            <td>
            <div id="CallScripts"></div>
            <div id="CallmeWidget"></div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


<script>
var script1 = document.createElement('script');
script1.src = 'detectWebRTC.min.js';
document.getElementById('CallScripts').appendChild(script1);

var script2 = document.createElement('script');
script2.src = 'jssip.min.js';
document.getElementById('CallScripts').appendChild(script2);

var script3 = document.createElement('script');
script3.src = 'widget.min.js?version=5';
document.getElementById('CallScripts').appendChild(script3);

var styl = document.createElement('link');
styl.setAttribute('rel', 'stylesheet');
styl.href = 'style.min.css';
document.getElementById('CallScripts').appendChild(styl);
</script>

<script> 
var CallmeWidget;
var CallmeWidgetFn = function() {
    CallmeWidget = new CallmeWidgetNew("CallmeWidget");
    CallmeWidget.create({
        "widgetId": "kkd8cVk8N21vesXKxvBfBebcUCGtaMy5cv18TT8PJ49eXrGxzt66R7S7kb96GeSmc8v9rthssgau1m3c6GT4gTg2Unesb8zz7c351bcafe4aeb79ac80e811dd16266c",
        "sipId": "<?php echo $number;?>",
        "domElement": "CallmeWidget"
    }, {
        "shape": "square",
        "language": "en",
        "width": "0",
        "dtmf": false,
        "dtmf_position": "top",
        "dtmf_time_to_disappear": "20",
        "font": "'Trebuchet MS','Helvetica CY',sans-serif",
        "color_call": "rgb(255, 255, 255)",
        "color_bg_call": "rgb(126, 211, 33)",
        "color_border_call": "rgb(191, 233, 144)",
        "color_connection": "rgb(255, 255, 255)",
        "color_bg_connection": "rgb(33, 211, 166)",
        "color_border_connection": "rgb(144, 233, 211)",
        "color_calling": "rgb(255, 255, 255)",
        "color_border_calling": "rgb(255, 218, 128)",
        "color_bg_calling": "rgb(255, 181, 0)",
        "color_ended": "rgb(255, 255, 255)",
        "color_bg_ended": "rgb(164,164,164)",
        "color_border_ended": "rgb(210, 210, 210)"
    });
};
if (window.addEventListener) {
    window.addEventListener('load', CallmeWidgetFn, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', CallmeWidgetFn);
}


</script>

Switching between 2 images html & javscript

I write this code, when I click on that specifiek place on the image it is going to the next image. so far it is working
but i want when i click on the same place again that the previous image is displayed again.

this is not working, how do i fix this?

    <img id="lights-off" src="../images/ABC2.png" style="display: none;">
    <img id="lights-on" src="../images/ABC.png">


    const lightsOff = document.getElementById("lights-off");
    const lightsOn = document.getElementById("lights-on");
    let isChanged = false;
    
    lightsOn.addEventListener("click", function(event){
        if (event.offsetX >= 0 && event.offsetX <= 100 && event.offsetY >= 0 && event.offsetY <= 20) {
            if(!isChanged){
                lightsOff.style.display = "block";
                lightsOn.style.display = "none";
                isChanged = true;
            } else {
                lightsOff.style.display = "none";
                lightsOn.style.display = "block";
                isChanged = false;
            }
        }
    });

I tryed to make some changes but it doenst work

Getting the object from an array on the basis of id [duplicate]

I have a array as follows :

data = [
  {
    "data": {
        "id":1,
        "vol":"0.0"
        "requiredId":100
        "details":{
            "ABC":"8.30",
            "OFG":"13.85",
            "SPG":"70.80"
        }
        
    }
  },
   {
    "data": {
        "id":2,
        "vol":"1.0",
        "requiredId":2
        "details":{
            "ABC":"3.30",
            "OFG":"15.85",
            "SPG":"70.80"
        }
        
    }
  }
]

I just want to get the object from this array where id is equal to requiredId. How can I do that?

how to do a post request with jession cookies (fetch/axios)?

I am doing a post request on “http://115.240.101.71:8282/CampusPortalSOA/..”
My problem is i cant access the jession cookie from header. so i cant send it to got further details. kindly help how to send and save received cookies ?

const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      body: '{"username":"2241003050","password":"2241003050","MemberType":"s"}',
    };

    await fetch("http://115.240.101.71:8282/CampusPortalSOA/login", options)
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((err) => console.error(err));
  };

const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
    };

    fetch("http://115.240.101.71:8282/CampusPortalSOA/studentinfo", options)
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((err) => console.error(err));
  };

in here i only get empty object as response. It works fine in rapidAPI & Thunder Client.

i am trying to get the studentinfo but for that i need to pass the jsession cookies that received while login request done. As i cant find the jsession cookies or dont know how to save and send cookies automatically.

How do I get a value from html and post it?

im a begginer web developer and i want to make something like that:
you login with username end password, then it redirects you to the home page, and says something like this:
Hello (username) welcome!
but i dont know how to read the value from the input please help

i searched it up but it only showed a search input option

Android phone incorrect uploaded image size (when it has big resolution)

maybe someone is facing an issue with on the android system (any browser).

I have script wich load image from a different url, but if I use big image size naturalWidth is defferent on the andoid system and ios/web

this happen only with images extra hi resolution in the example 11297 X 10550

const imgSrc =
    "https://di9mr54a05a64.cloudfront.net/api-messefrankfurt.expoplatform.com/image/MTY3NDA2MTQ5NzYzYzgyNmI5OGIzN2E=.jpeg";

const image = new window.Image();
image.addEventListener("load", function (...rest) {
      console.dir(this);
      console.log("size :", this.width, this.height);
      console.log("natural :", this.naturalWidth, this.naturalHeight);
    });
image.src = imgSrc;

enter image description here

Widtn/Height or naturalWidth/naturalHeight are different on the devices
example on the sundbox

I whant to have same size on the different devices.

How do I pass the event function to callback?

I am using Slick slider and using the mouse wheel to scroll to the slides I need to send the event function of mouse wheel to a callback function but it is throttled so that it can be called after the period of waiting is complete I have tried using bind to call the function but it fails

<div class="tachyon-slides-mobile">
  <div class="tachyon-slide">
     <div class="slide-content">
         ...
      </div>
  </div>
  <div class="tachyon-slide" >
    <div class="slide-content">
      ...
     </div>
    </div>
  </div>
</div>


const tslide = $(".tachyon-slides-mobile");
        function onSliderAfterChange(event, slick, currentSlide) {
          $(event.target).data('current-slide', currentSlide);
        }
        
        function onSliderWheel(e) {
          var deltaY = e.originalEvent.deltaY;
            $currentSlider = $(e.currentTarget);
            currentSlickIndex = $currentSlider.data('current-slide') || 0;
          if (
            // check when you scroll up
            (deltaY < 0 && currentSlickIndex == 0) ||
            // check when you scroll down
            (deltaY > 0 && currentSlickIndex == $currentSlider.data('slider-length') - 1)
          ) {
            return;
          }

          if (e.originalEvent.deltaY < 0) {
           $currentSlider.slick('slickPrev');
          } else {
            $currentSlider.slick('slickNext');
          }
        }

        function onBeforeChange(event, slick, currentSlideIndex, nextSlideIndex) {
           if(nextSlideIndex > currentSlideIndex) {
             // Animation to go to next slide
            $('.tachyon-slides-desktop .tachyon-slide[data-slick-index=' + currentSlideIndex + ']').addClass('animate__fadeBehindDown').removeClass('animate__fadeInUpFront animate__fadeInDownFront');
            $('.tachyon-slides-desktop .tachyon-slide[data-slick-index=' + nextSlideIndex + ']').addClass('animate__fadeInUpFront').removeClass('animate__fadeInDownFront animate__fadeBehindUp');
    
          } else {
             // Animation to go to previous slide
             $('.tachyon-slides-desktop .tachyon-slide[data-slick-index=' + nextSlideIndex + ']').addClass('animate__fadeInDownFront').removeClass('animate__fadeBehindDown ');
            $('.tachyon-slides-desktop .tachyon-slide[data-slick-index=' + currentSlideIndex + ']').addClass('animate__fadeBehindUp').removeClass('animate__fadeInUpFront animate__fadeBehindDown');
          }
        }


    function throttle(cb, delay) {
        let wait = false;
        return (...args) => {
          if (wait) {
              return;
          }
        
          cb(...args);
          wait = true;
          setTimeout(() => {
            wait = false;
          }, delay);
        }
      }
     

        tslide.each(function(index, element) {
            var $element = $(element);
            // set the length of children in each loop
            // but the better way for performance is to set this data attribute on the div.slider in the markup
            $element.data('slider-length', $element.children().length);
          })
          .slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: false,
            arrows: false,
            infinite: false,
            speed: 0,
            vertical: true,
            verticalSwiping: true
          })
           .on('afterChange', onSliderAfterChange)
           .on('wheel', function(e){
            throttle(onSliderWheel(e), 1000); //doesn't work
            // throttle(onSliderWheel.bind(undefined, e), 1000); //doesn't work
           })
          .on('beforeChange', onBeforeChange);

I’m not really sure what I’m doing wrong here.. can someone point me in the right direction?. Thank you!

I just don’t understand how to run this project

I asked for files or code from a website that closed recently because it helped me to play my childhood favourite MMORPG, occasionally, but I just don’t understand how or where do I have to run this.
I tried Linux first on it’s console but it seems having very basic notions just don’t help, I apparently got it to install but I got stuck trying to run it, had too many errors and conflicts between Python versions.
This is my very first question, I’m worried that this may not be the place or the way to ask this, also sorry if it’s very annoying to help beginners…

My only conclusion is that these instructions just aren’t enough or unclear:

Add “export PYTHONPATH=/home/<>/fashionista/fashionistapulp” at the end of ~/.bashrc

$ git clone https://github.com/PiwiSlayer/DofusFashionista.git fashionista
$ chmod 777 fashionista
$ chmod 777 fashionista/fashionistapulp/fashionistapulp
$ cd fashionista
$ sudo ./configure_fashionista_root.py -i -s -d
$ ./configure_fashionista.py
$ sudo ./run_fashionista.sh

I did exactly as creator says on Github, managed to find bashrc, got many errors, tried to switch both Python version and code’s Python version on every file without any success.

how to preserve zeros on the left of digits as numbers in JS [duplicate]

I declared the var numero to represent digits under 10 as numbers, but I struggled saving zeros on the left of these numbers!

let start = 10, end = 0, stopYo = 3;

for (let i = start; i >= stopYo; i--) {
  let numero = `0${i}`;
  if (i == start)console.log(i);
  else if (i < start) console.log(numero);
}

How can I keep zeros on the left of digits without turning them into strings?