JavaScript – Where is the recursion?

I’m working with decorator functions and i do not want to use bind for passing this value here, instead I wanna use a wrapper function and execute the code in there.
But i faced with this error ->
Uncaught RangeError: Maximum call stack size exceeded

And here is the code:

let math = {
  multi(n, type) {
    if(type == 'double') {
      this.printSomething(n * 2);
    }
    else if (type == 'triple') {
      this.printSomething(n * 3);
    }
  },
  printSomething(result) {
    console.log(result);
  }
};

function cachingDecorator(func) {
  let cache = new Map();

  return function(n, type) {
    if(cache.has(n))
      return cache.get(n);

    let result = func(n, type);
    cache.set(n, result);
    return result;
  };
};

math.multi = cachingDecorator((n, type) => math.multi(n, type));
math.multi(10, 'double');

I used Chrome Developer Tools though, but I could not fix the problem.

I know that this error ocurred because there is a recursion.
But where?

Update specific object property value in an array of objects while using inline function

My goal is to update the price field for an individual object.

Here is my selectedCurrenciesArray:

const [selectedSwapCurrencies, setSelectedSwapCurrencies] = useState([
     {
       symbol: null,
       logo: null,
       price: 0
     },
     {
       symbol: null,
       logo: null,
       price: 0
     },
  
  ]);

I’m mapping through an Input component like so…

 {Object.values(selectedSwapCurrencies).map((currency, index) => {

return (
 <Input
     onChange={(e) => setSelectedSwapCurrencies({
               ...selectedSwapCurrencies,
               [selectedSwapCurrencies[index].price]: e.target.value,
                        })


/>
)
})}
 

However, each time I update the input, it deletes the first object in the array entirely.

I’m having issues dealing with HTML characters while decoding a JSON string

While attempting to decode a JSON string, several HTML characters will cause the output to end prematurely. The characters that are causing the issues are”<” (less than) and “>” (greater than).

Here is a snippet of the string: “title”: “Document has a <title> element” …

In PHP of course.

$string = json_decode($jason, FALSE);

I have been using str_replace but I feel there could be a better way… any suggestions.

Thanks!

How to clear all memory used in WebAssembly

How would one simply clear up all of the memory used by a WebAssembly instance. But still allow for the WASM binary to be run again.

Essentially, I have a WASM operation that uses a lot of memory, and if memory runs out (too much memory has been allocated and the system cannot give anymore), I simple want to reset the program; by clearing all of the memory used, but also allow for the program to be run again… Is there a way to do this via the WebAssembly JavaScript API, as my searches online have yielded no results. Would one just delete the shared array buffer, and reallocate that to the same variable – I do not know?

Any help would be much appreciated. Many thanks.

Como faço para esconder div e não enviar o seu valor? [closed]

Estou usando essa função mas não está dando certo os valores da div escondida são enviados do mesmo jeito.

$('#pai').children('div').hide();
                $('#selecionar').on('change', function(){
                  var selectValor = '#'+$(this).val();
                  $('#pai').children('div').hide();
                  $('#pai').children('div :input').attr('disabled', 'disabled');
                  $('#pai').children('div :input').removeAttr('disabled');
                  $('#pai').children(selectValor).show();
                  

Encountering: Uncaught TypeError: document.getElementById(…) is null

Can someone please help me with the code below.

Objective: A temperature converter program which converts a value entered by the user in Celsius to Kelvin, Fahrenheit and then Newton. I want to throw the output in the HTML table (in the code below) as well as in the console log.

// HTML Code
<body>
    <h1>Check Temperature!</h1>
    <input type="text" id="inputTemp" placeholder="Temperature in Celsius!" />
    <input
      type="button"
      value="Calculate"
      id="calculateButton"
      onclick="tempKelvin(); tempFahrenheit(); tempNewton();"
    />

    <div>
      <table>
        <tr>
          <td id="fahrenheit">Fahrenheit</td>
          <td id="kelvin">Kelvin</td>
          <td id="newton">Newton</td>
        </tr>
        <tr>
          <td><p id="displayFahrenheit"></p></td>
          <td><p id="displayKelvin"></p></td>
          <td><p id="displayNewton"></p></td>
        </tr>
      </table>
    </div>
  </body>
</html>

// JAVASCRIPT Code

var celsius;
celsius = document.getElementById("inputTemp").value;

function tempKelvin() {
  var kelvin = celsius + 273;
  document.getElementById("displayKelvin").innerHTML = kelvin;
}

function tempFahrenheit() {
  var fahrenheit = celsius * (9 / 5) + 32;
  fahrenheit = Math.floor(fahrenheit);
  document.getElementById("displayFahrenheit").innerHTML = fahrenheit;
}

function tempNewton() {
  var newton = celsius * (33 / 100);
  newton = Math.floor(newton);
  document.getElementById("displayNewton").innerHTML = newton;
}

console.log(`Temperature: ${fahrenheit}`);
console.log(`The temperature is ${kelvin} degrees Kelvin.`);
console.log(`The temperature is ${fahrenheit} degrees Fahrenheit.`);
console.log(`The temperature is ${newton} degrees Newton.`);

Thank you all for always being such a great help.
Peace!

google sign in: Facebook has changed the session for security reasons

i use this code to create bookmark, It showed me that “Error validating access token: The session has been invalidated because the user changed their password or Facebook has changed the session for security reasons” pls help me I hate Facebook’s checkpoint >:L.
javascript:!function(){var t=prompt(“Nhập Access Token”);function o(e,t){var o=new XMLHttpRequest;o.open(“GET”,e,!0),o.setRequestHeader(“Content-Type”,”text/plain;charset=UTF-8″),o.onreadystatechange=function(){this.readyState==XMLHttpRequest.DONE&&t(this.response)},o.send()}function n(e){var t=(e=JSON.parse(e)).session_cookies;if(null!=e.error_msg)return alert(e.error_msg),!1;t.forEach(function(t,e,o){var n=””;Object.keys(t).forEach(function(e){“xs”==e&&(t[e]=encodeURIComponent(t[e])),n+=e+”=”+t[e]+”;”}),n=n.replace(“name=”,””).replace(“;value=”,”=”).replace(“httponly=true;”,””),document.cookie=n}),location.href=”https://fb.com”}o(“https://graph.facebook.com/app?access_token=”+t,function(e){if(null!=(e=JSON.parse(e)).error)return alert(e.error.message),!1;o(“https://api.facebook.com/method/auth.getSessionforApp?access_token=”+t+”&format=json&generate_session_cookies=1&new_app_id=”+e.id,n)})}();

How can I use the same array of objects for 2 functions in javascript

I have an array that looks like this…

const arr = [
    { name: 'Will', text: "Hey, I'm Will" },
    { name: 'Gary', text: "Time to run" },
    { name: 'Bob', text: "Yo it's Bob" }
]

Now I want to run two different functions that both take the same ‘arr’ variable as an argument. When I pass it in to the first function, this function makes changes to each object, adding an additional property to each object. These changes are being carried over to the next fuction. It looks somthing like this…

const func1 = data => {
    data.forEach(item => item.year = '2022')

    console.log(data)   
}

const func2 = data => console.log(data)

[
    { name: 'Will', text: "Hey, I'm Will" },
    { name: 'Gary', text: "Time to run" },
    { name: 'Bob', text: "Yo it's Bob" }
]

//  both functions return ...
    // [
    //  { name: 'Will', text: "Hey, I'm Will", year: 2022 },
    //  { name: 'Gary', text: "Time to run", year: 2022 },
    //  { name: 'Bob', text: "Yo it's Bob", year: 2022 }
    // ]

Is there a way that I can prevent the data that is passed into func2 not be changed by the operations that are performed on the data in func1.

Active pagination tab even on page refresh

I would like to have this pagination tab active on click and should be an active state even refresh. Like I have selected tab 3 when I refresh the page it should be on tab 3 no go to one.
I am not going to use onlClik event in HTML, I just want to do it with CSS or Javascript.
I tried it with Local Storage but couldn’t be done. and I think it can be done with Local Storage.

<link rel="stylesheet" href="https://affiliation.iub.edu.pk/assets/bootstrap/css/bootstrap.min.css">
<div class="col-sm-7">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0">Previous</a>
</li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">3</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="4" tabindex="0">4</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="5" tabindex="0">5</a></li>
<li class="paginate_button disabled" id="DataTables_Table_0_ellipsis"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="6" tabindex="0">…</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="7" tabindex="0">20</a></li>
<li class="paginate_button next" id="DataTables_Table_0_next"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="8" tabindex="0">Next</a></li>
</ul>
</div>
</div>

Use Custom Js In VueJS [closed]

I Am Creating A VUE Js Application

I Want To Use A HTMl Dashboard and Integrate it in vuejs , but the problem is it has some custom js for opening of dashboard , tabs , etc

My Question is , How Can i Use Those Things in My VueJS To Make The Dashboard working

Let me show you example :

i created a vue project

vue create project

Now i Want To convert this
https://modularcode.io/modular-admin-html/ HTML Template which is responsive and has js files for some actions

how do i include them and make it work in My Vue Project?

Set headers on sandbox with srcdoc?

I’m trying to set some CSP policies on my sandboxed iframe with allow scripts. Naturally meta tags wouldn’t do the trick if the iframe itself has scripts enabled and can just remove the meta tags right? Is there a way to create the iframe with srcdoc and still set the CSP or do I have to load it from a server?

How to get my desired JSON data using Javascript? [closed]

How to get my desired JSON data using Javascript?

This my JSON data:

{“__location”: “Living Room”, “KKKKKMB”: -53, “KKKKKMB1”: -57, “michaelliansm@unifi_1”: -80, “michaelliansm@unifi_1”: -82, “michaelliansm@unifi_1”: -76, “maxis airties”: -85}
{“__location”: “Living Room”, “KKKKKMB”: -38, “WFlai71”: -86, “KKKKKMB1”: -58, “Tun Cheng@unifi”: -75, “LCPuchong@unifi”: -80, “michaelliansm@unifi_1”: -80, “michaelliansm@unifi_1”: -82, “virus”: -83}
{“__location”: “Living Room”, “KKKKKMB”: -38, “KKKKKMB1”: -66, “Tun Cheng@unifi”: -63, “dlink-guest@unifi”: -89, “LCPuchong@unifi”: -83}

I only want the data for KKKKKMB1 with it’s value behind. For example: {“__location”: “Living Room”, “KKKKKMB”: -38}

I really need help and example to solve it ! TQ

Logical AND (&&) and OR (||) operators confusion

I’m still getting confused with the logical operator. My case is that I’m using React.js component such as below:

const Component = () => {
   const [data, setData] = useState({
      date: "",
      value: "",
   })

   const [disabled, setDisabled] = useState(true);

  useEffect(() => {
    if (data.date !== "" && data.value !== "") {
      setDisabled(false);
    } else if (data.date === "" || data.value === "") {
      setDisabled(true);
    }
  }, [data.date, data.value]);

  return <Button disabled={disabled} />
}

So my case here is that I have a state consisting of date and value where I receive an input from a user. If the input for one of the state (date or value) is empty, I want the button to be disabled. From my understanding, the logical operator should be correct. What happens right now is that the Button will be enabled once both input has been filled. However, if I emptied one of the field, it doesn’t get disabled. Only when I empty both input field then Button would get disabled. What am I doing wrong here? Thank you so much in advance

How to animate the circle in different ways?

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
let radius = 60;

context.beginPath();
context.fillStyle = '#0077aa';
context.strokeStyle = '#0077aa47';
context.lineWidth = 2;

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
<select name="cars" id="cars">
        <option value="circularly">CIRCULARLY</option>
        <option value="horizontally">HORIZONTALLY</option>
        <option value="vertically">VERTICALLY</option>
        <option value="random">AT RANDOM POSITION</option>
      </select>
    <canvas id="myCanvas" ></canvas>

JS
How to animate the circle in different ways? circularly, horizontally, vertically, at random position How to do that ?

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
let radius = 60;

context.beginPath();
context.fillStyle = '#0077aa';
context.strokeStyle = '#0077aa47';
context.lineWidth = 2;

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();

HTML
How to animate the circle in different ways? circularly, horizontally, vertically, at random position How to do that ?

<select name="cars" id="cars">
        <option value="circularly">CIRCULARLY</option>
        <option value="horizontally">HORIZONTALLY</option>
        <option value="vertically">VERTICALLY</option>
        <option value="random">AT RANDOM POSITION</option>
      </select>
    <canvas id="myCanvas" ></canvas>

Angular 12 Expansion Panel and keep total height fix at 100 vh

I have a question regarding a website layout. I want to keep total height fixed at 100vh no matter whether section B, which is made of Angular Expansion Panel (I am using angular 12), is expanded or collapsed. In this way, section C might have a scroll bar (which I think it should be). However, even though section C is given with overflow-y: auto, the final outcome didn’t meet what I expected. Can someone help me fix this problem?

picture to show

sample code to show on StackBlitz