Category: javascript

n = Number(n);

for (let i = 1; i <= n; i++) {
    return i;
}
}

console.log(fromOneToN(5)); //Outputs only 1

The function returns 1 when called and not 1 2 3 4 5

Can someone help out?

I’ve written a bookmarklet for clicking a controllable amount of times on a HTML element (for clicker games, the like). However, when I run it, it prompts “How many times do you want to click?” twice.

To the best of my knowledge, the second prompt doesn’t do anything. Is there a way I can get rid of it?

Code:

javascript:
var clicked = false
document.onclick= function(event) {  
    if (!clicked) {
      var target= 'target' in event? event.target : event.srcElement;

      var clickamount= parseInt(prompt("Enter time to click "+target.id))-1;

      for (let i = 0; i < clickamount; i++) {
          target.click();
      }
      clicked = true
    }
    
};

I’m creating a bubble map and am having a problem with the smallest bubble sizes which are not behaving as I expect. After searching a bit in the documentation to understand the problem, I found this:
https://api.highcharts.com/highcharts/plotOptions.bubble.sizeBy

I don’t want to change the setting for ‘sizeBy’ from its default Area (that makes the most sense for my data) but there is helpful example alongside the API entry in JSFiddle:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bubble-sizeby/

Highcharts.chart(‘container’, {

chart: {
    type: 'bubble',
    plotBorderWidth: 1,
    zoomType: 'xy'
},

title: {
    text: 'Highcharts Bubbles Sizing'
},
subtitle: {
    text: 'Smallest and largest bubbles are equal, intermediate bubbles different.'
},

xAxis: {
    gridLineWidth: 1
},

yAxis: {
    startOnTick: false,
    endOnTick: false
},

series: [{
    data: [
        [1, 1, 1],
        [2, 2, 2],
        [3, 3, 3],
        [4, 4, 4],
        [5, 5, 5]
    ],
    sizeBy: 'area',
    name: 'Size by area'
}, {
    data: [
        [1, 1, 1],
        [2, 2, 2],
        [3, 3, 3],
        [4, 4, 4],
        [5, 5, 5]
    ],
    sizeBy: 'width',
    name: 'Size by width'
}]

});

Keeping in mind that I’m only nterested in showing by Area (the default), what I don’t understand about the example is why the first bubble (which has a z value of 1) is so small compared to the other bubbles. It’s area should be 0.5 times the area of the second bubble (which has a z value of 2). But it’s much much smaller (like 1/10 of the area). All of the other bubbles however seem to be proportionally correct — it’s really just that first bubble.

So my question is — why is the first bubble so small and is there a way to prevent this from happening so that all of the bubbles are proportionate according to area?

Many thanks in advance,

David

[tic-tac-toe]https://replit.com/@SierghieiShin/Soursework#logic.js

I cant figure out how to:

1. Make it work with more than 3×3 field.

2. Make this “click” function simplier then with this huge if.

I have an input field and I want to give this field a validation that accepts only hex numbers. So it should accept numbers from 0 to 9 and letters from A to F.

Here is my input field:

<input type="text" class="form-control" tabindex="9" maxlength="2">

How do you think I can achieve this?

I have a container, which children from 1 to 6 elements, it depends. Here are the styles of the container:

  display: flex;
  min-height: 40.25rem;
  justify-content: center;

Here is what I need:

When I’m setting position: relative; left: 60px * n; it moves the children as expected. But the container itself doesn’t center the items in the center. So visually the items occupy more space in the left side. How can I stack the items, keeping the common position centered?

I’m wondering how to convert an array of strings

lines = ['101','010','110'];

to an array of arrays like this:

x = [
[1,0,1],
[0,1,0],
[1,1,0]'
]

I already tried

x = (lines.forEach(e => (e.split(''))))

and realized String.split doesnt mutate the current string. So my next step was to create a new array with these values.

x = new Array(lines.forEach(e => (e.split(''))))

My thoughts behind this line:
The code should take an element (e) of the lines array and apply the split funtion to it. (which is does when i console.log() it.) BUT it doesnt apply it to the new array.

Maybe the problem is, that it doesn’t loop through x but maybe i overlook another fact.

So I have a rather primitive HTML table, but it should have two versions – one for mobile, one for desktop/tablet.

In the desktop version the table is normal – information is on the left side and the corresponding points are at the right side.

Now in the mobile version there should be a new tablerow which contains the same text in a rowspan of 2.

As far as I am aware, this isn’t possible to do with purely CSS (media queries)…

I am aware you can get the viewport height and width using JavaScript, but then it should be transmitted to an API which gives corresponding content.

• Is this prototype any good?:

The frontend sends a POST request using Fetch to the Backend with the data of the viewport width and then fetches the corresponding HTML from the Backend via AJAX.

• Would this work?
• This looks rather cumbersome and complicated for such basic functionality. Is there a better way to do this?

My pseudocode:
Frontend:

var width = getViewportwidth();
var xhr = new XMLHttpRequest();
xhr.open(width, url);

.fetch(API URL here, options here etc).then {
Ajax call here.addtodomhere("#domelement");
}

Backend:

[/Apiurlhere]
[GET]
if (width) < 600 {
table markup for mobile view here
} else {
table markup for desktop view here 
}

I am using .NET Core for the Backend if it matters.

I’m programing a game and i would like to play a background sound on all my website.
If I change page I want that the music continue. I add a button settings to turn on or off the sound.
But I trayed many npm functions, no one works.

Have you got solutions for that?

Thanks

Can you please tell me if it is possible to execute the function while the hover of the element is done without setInterval? That the function would be looped.

$("#left").hover(function() {
  left_statuses();
})

function left_statuses() {
  var scroll = $(".scroll").scrollLeft();
  var new_scroll = scroll + 100;
  $(".scroll").scrollLeft(new_scroll);
}

.left {
  z-index: 1;
}

.scroll {
  width: 100px;
  height: 50px;
  background: red;
  overflow: hidden;
  overflow-x: scroll;
}

.scroll div {
  width: 1000px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
  LEFT
</div>

<div class="scroll">
  <div></div>
</div>

I want to resolve docsCount field for ModuleStats but I get an error Error: Undefined resolver type error. Make sure you are providing an explicit object type for the “ModuleStatsResolver”

@ObjectType()
export class ModuleStats {
  @Field(() => ID)
  _id: string;
  @Field()
  name: string;
  @Field(() => Int)
  docsCount: number;
}

@Resolver(() => ModuleStats)
export class ModuleStatsResolver {
  @Query(() => ModuleStats)
  async getModuleStats(@Args() args: ModuleArgs) {
    return await this.moduleService.getStats(args);
  }

  @ResolveField("docsCount", () => Int)
  async getDocsCount(@Parent() moduleStats: ModuleStats) {
    return await this.docsService.getCount(moduleStats._id);
  }
}

ı have been devoloing an e-commerce system but ı have problem with iyzipay payment api. I make successful request and get response from server but I can’t store data comes from server. anyone help?

 let returnedData = {}

  iyzipay.payment.create(paymentRequest, function (err, result) {
    if (err) {
      return next(new CustomError("Ödeme başarısız.", 500))
    } 
     return returnedData = result
  })

  //ı can't see data here and return empty {}
  console.log(returnedData)

  // but ı can see here when ı wait 1 second
  setTimeout(() => {
    console.log(returnedData)
  }, 1000);

<div id="app">
  <div class="wrapper">
    <virtual-list class="list" style="height: 360px; overflow-y: auto" data-key="key" :keeps="20" :data-sources="computedItems" :data-component="Item" />
    <hr />
    <!-- Create a binding between the searchString model and the text field -->

    <input type="text" v-model="searchString" placeholder="lSources" />
    <p>sortKey = {{ sortKey }}</p>
    <li v-for="item in sortedItems" :key="item">
      <input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="item.checked" /> {{ item.price }} - {{ item.name }}
    </li>
  </div>
  <hr />
  <div class="bbb">
    <button @click="sortKey = 'name'" />name<br />
    <button @click="sortKey = 'price'" />price
  </div>
</div>

I have functionality like, filtering array and according to name, price filter array. Where logic is working fine. But I am not sure, how to place it inside of the vue-virtual-scroll-list and preform the same action inside.

Below is my code https://codesandbox.io/s/live-demo-virtual-list-forked-hwq38?file=/src/App.vue

I want to run a loop from 1 to 10 & ​want to print “divisible by 3” beside all the numbers which are divisible by 3 same for 5, print “divisible by both” beside the numbers which are divisible by 3 & 5 both as explained below.

Expected Output:-

  1
  2
  3 'divisible by 3'
  4
  5 'divisible by 5'
  6 'divisible by 3'
  7
  8
  9 'divisible by 3'
 10 'divisible by 5'
 11
 12 'divisible by 3'
 13
 14
 15 'divisible by both'

I read How to load Google Tag Manager with next/script component (Next.js 11)? and I also read this doc page.

But none of them solved my problem.

I want to include Google Tag on many of my sites that are developed using nextjs. Thus I have creatd a simple reusable component:

import Script from 'next/script'

const GoogleTag = ({ identifier }) => {
    if (!identifier || !identifier.startsWith('G-')) {
        throw new Error('Google tag id is not correct;');
    }
    return <>
        <Script
            src={`https://www.googletagmanager.com/gtag/js?id=${identifier}`}
            strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
            {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){window.dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '${identifier}');
        `}
        </Script>
    </>
}

export default GoogleTag;

And I use it in each of my sites, in the _app.js file, this way:

import Head from 'next/head';
import GoogleTag from '../Base/GoogleTag';

export default function MyApp({ Component, pageProps }) {

return (
        <>
            <Head>
                <GoogleTag identifier='G-9XLT855ZE0' />
            </Head>
            <div>
                application code comes here
            </div>
        </>
    )
}

But I don’t see Google Tag script being loaded in the Chrom’s Dev Tools, int Networks tab.