问:
I am getting ValueError in the script
I am getting valueError in this code.

I do not know why?

```<code>from sys import argv
(script,first,second,third)=argv

print('The script is called:',script)
print('The first variable is :',first)
print('The second variable is :',second)
print('The third variable is :',third)
</code>```

答:
You're either not providing enough arguments to run your script or providing too many arguments, you need to provide three arguments like this:</p>

```<code>python3 script.py first second third
</code>```

Title: I am getting ValueError in the script

Body:
I am getting valueError in this code.

I do not know why?

from sys import argv
(script,first,second,third)=argv

print('The script is called:',script)
print('The first variable is :',first)
print('The second variable is :',second)
print('The third variable is :',third)

Body:
You're either not providing enough arguments to run your script or providing too many arguments, you need to provide three arguments like this:

python3 script.py first second third


来源: stackexchange

问:
Change I18n locale don't work for Vee-Validate - VueJS
I am using Vee-Validate plugin for form validation in my VueJS Application. So, my app has more than 1 language, for that, I am using I18n. All the plugins I am using are in separate files under plugins folder and then I am getting all files and registering all plugins in main.js, so in my Vee-Validate.js I have written:

```<code>import Vue from 'vue';
import VueI18n from 'vue-i18n';
import VeeValidate from 'vee-validate';
import enMessages from "./../locales/validation/en";
import urMessages from "./../locales/validation/ur";

Vue.use(VueI18n);

const i18n = new VueI18n();
i18n.locale = "en";

Vue.use(VeeValidate, {
  errorBagName: 'vErrors',
  i18nRootKey: 'validations',
  i18n,
  dictionary: {
    en: {
      messages: enMessages
    },
    ur: {
      messages: urMessages
    }
  }
});
</code>```

But on clicking the change locale button don't change this file locale,

My change locale function:

```<code>changeLocale () {
  this.$i18n.locale == 'en' ? this.$i18n.locale = 'ur' : this.$i18n.locale = 'en'
  this.$vuetify.rtl = this.$i18n.locale == 'ur' ? true : false;
}
</code>```

答:
Well, I'm not saying your configuration is wrong. I'm going just share mine that is working just fine.

1- vue.config.js

```<code>module.exports = {
  transpileDependencies: [
    'vuetify',
  ],

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: true,
    },
  },
};
</code>```

2- i18n.ts

```<code>import Vue from 'vue';
import VueI18n, { LocaleMessages } from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages(): LocaleMessages {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages: LocaleMessages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
});
</code>```

3- main.ts

```<code>import Vue from 'vue';

import './registerServiceWorker';
import { sync } from 'vuex-router-sync';
import VueLodash from 'vue-lodash';
import Storage from 'vue-ls';
import vuetify from './plugins/vuetify';
import './utils/vee-validate';

// Components
import './components';

// Application imports
import App from './App.vue';
import router from '@/router';
import store from '@/store';
import i18n from './i18n';

// Sync store with router
sync(store, router);
const options = {
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'local', // storage name session, local, memory
};
Vue.use(Storage, options);
Vue.config.productionTip = false;
Vue.use(VueLodash, { name: 'lodash' });
new Vue({
  router,
  store,
  vuetify,
  i18n,
  render: h => h(App),
}).$mount('#app');
</code>```

4- src/plugins/vuetify.ts

```<code>import Vue from 'vue';
import Vuetify from 'vuetify/lib';

// import VueI18n from 'vue-i18n';
// import i18n from '@/i18n';
import en from '@/locales/en.json';
import jp from '@/locales/jp.json';

Vue.use(Vuetify);

export default new Vuetify({
  lang: {
    locales: { en, jp },
    current: 'jp',
  },
});
</code>```

5- src/utils/vee-validate.js

```<code>/* eslint-disable no-underscore-dangle */
import { extend } from 'vee-validate';
import { required, email, confirmed } from 'vee-validate/dist/rules';
import i18n from '@/i18n';

extend('required', {
  ...required,
  message: (_, values) => i18n.t('GENERAL_VALIDATION_MESSAGES_REQUIRED', values),
});

extend('email', {
  ...email,
  message: (_, values) => i18n.t('LOGIN_FORM_EMAIL_VALID_MESSAGE', values),
});
extend('confirmed', {
  ...confirmed,
  message: (_, values) => i18n.t('CHANGE_PASSWORD_FORM_CONFIRMATION_VALID_MESSAGE', values),
});
</code>```

6- I use vuex so from my language store

```<code>import Vue from 'vue';
import { localize } from 'vee-validate';
import Vuetify from 'vuetify/lib';
import i18n from '@/i18n';
import en from '@/locales/en.json';
import jp from '@/locales/jp.json';

...

const mutations = {
  SET_LANG(state, data) {
    state.lang = data;
    i18n.locale = data;
    localize(data, jp);
  },
  SET_LANG_ERROR() {
    window.$messageGlobal('Error switching languages');
  },
};
</code>```

Hope it helps

ContentLicense: CC BY-SA 4.0

Body:
I am using Vee-Validate plugin for form validation in my VueJS Application. So, my app has more than 1 language, for that, I am using I18n. All the plugins I am using are in separate files under plugins folder and then I am getting all files and registering all plugins in main.js, so in my Vee-Validate.js I have written:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import VeeValidate from 'vee-validate';
import enMessages from "./../locales/validation/en";
import urMessages from "./../locales/validation/ur";

Vue.use(VueI18n);

const i18n = new VueI18n();
i18n.locale = "en";

Vue.use(VeeValidate, {
  errorBagName: 'vErrors',
  i18nRootKey: 'validations',
  i18n,
  dictionary: {
    en: {
      messages: enMessages
    },
    ur: {
      messages: urMessages
    }
  }
});

But on clicking the change locale button don't change this file locale,

My change locale function:

changeLocale () {
  this.$i18n.locale == 'en' ? this.$i18n.locale = 'ur' : this.$i18n.locale = 'en'
  this.$vuetify.rtl = this.$i18n.locale == 'ur' ? true : false;
}

Body:
Well, I'm not saying your configuration is wrong. I'm going just share mine that is working just fine.

1- vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify',
  ],

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: true,
    },
  },
};

2- i18n.ts

import Vue from 'vue';
import VueI18n, { LocaleMessages } from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages(): LocaleMessages {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages: LocaleMessages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
});

3- main.ts

import Vue from 'vue';

import './registerServiceWorker';
import { sync } from 'vuex-router-sync';
import VueLodash from 'vue-lodash';
import Storage from 'vue-ls';
import vuetify from './plugins/vuetify';
import './utils/vee-validate';

// Components
import './components';

// Application imports
import App from './App.vue';
import router from '@/router';
import store from '@/store';
import i18n from './i18n';

// Sync store with router
sync(store, router);
const options = {
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'local', // storage name session, local, memory
};
Vue.use(Storage, options);
Vue.config.productionTip = false;
Vue.use(VueLodash, { name: 'lodash' });
new Vue({
  router,
  store,
  vuetify,
  i18n,
  render: h => h(App),
}).$mount('#app');

4- src/plugins/vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

// import VueI18n from 'vue-i18n';
// import i18n from '@/i18n';
import en from '@/locales/en.json';
import jp from '@/locales/jp.json';

Vue.use(Vuetify);

export default new Vuetify({
  lang: {
    locales: { en, jp },
    current: 'jp',
  },
});

5- src/utils/vee-validate.js

/* eslint-disable no-underscore-dangle */
import { extend } from 'vee-validate';
import { required, email, confirmed } from 'vee-validate/dist/rules';
import i18n from '@/i18n';

extend('required', {
  ...required,
  message: (_, values) => i18n.t('GENERAL_VALIDATION_MESSAGES_REQUIRED', values),
});

extend('email', {
  ...email,
  message: (_, values) => i18n.t('LOGIN_FORM_EMAIL_VALID_MESSAGE', values),
});
extend('confirmed', {
  ...confirmed,
  message: (_, values) => i18n.t('CHANGE_PASSWORD_FORM_CONFIRMATION_VALID_MESSAGE', values),
});

6- I use vuex so from my language store

import Vue from 'vue';
import { localize } from 'vee-validate';
import Vuetify from 'vuetify/lib';
import i18n from '@/i18n';
import en from '@/locales/en.json';
import jp from '@/locales/jp.json';

...

const mutations = {
  SET_LANG(state, data) {
    state.lang = data;
    i18n.locale = data;
    localize(data, jp);
  },
  SET_LANG_ERROR() {
    window.$messageGlobal('Error switching languages');
  },
};

Hope it helps


问:
Vuetify v-dialog - Dynamic width
is it possible to make the v-dialog have dynamic width? Currently the v-dialog by default has dynamic height which makes it shorten and lengthen depending on the length of content.

But can this be done with width?

I have a v-dialog that contains 4 tabs. 3 of those tabs don't require much width but the last tab contains a table so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.

Vuetify v-dialog: https://vuetifyjs.com/en/components/dialogs

答:
For Desktop

so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.

For desktop, we can set dynamic width for v-dialog based on contents inside the dialog easily, by manually setting the width="auto " (with extra space).

```<code><template>
  <v-dialog width="auto ">
    ...
  </v-dialog>
</template>
</code>```

For Mobile

Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens. But need to set dialog to full-screen in mobile devices only. We can easily set dynamic full-screen using Vuetify breakpoints like:

```<code><template>
  <v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>
</code>```

Final Version

We can combine both the logics into one like:

```<code><template>
  <v-dialog width="auto " :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>
</code>```

Working Demo | Code Pen

On Desktop

If we open the dialog using the click me button, we can see the dialog has a small width as the content of tab 1 & 2 is very small. But if we click on tab 3, which has a large data table, you can see the dialog width and height automatically increases. You can toggle between tabs and can see this again.

On Mobile

If you open this demo on mobile, you can see the dialog is opening in full-screen by default and the width is constant.

Title: Vuetify v-dialog - Dynamic width

Body:
For Desktop

so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.

For desktop, we can set dynamic width for v-dialog based on contents inside the dialog easily, by manually setting the width="auto " (with extra space).

<template>
  <v-dialog width="auto ">
    ...
  </v-dialog>
</template>

For Mobile

Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens. But need to set dialog to full-screen in mobile devices only. We can easily set dynamic full-screen using Vuetify breakpoints like:

<template>
  <v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>

Final Version

We can combine both the logics into one like:

<template>
  <v-dialog width="auto " :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>

Working Demo | Code Pen

On Desktop

If we open the dialog using the click me button, we can see the dialog has a small width as the content of tab 1 & 2 is very small. But if we click on tab 3, which has a large data table, you can see the dialog width and height automatically increases. You can toggle between tabs and can see this again.

On Mobile

If you open this demo on mobile, you can see the dialog is opening in full-screen by default and the width is constant.


问:
How many bits is a WORD and is that constant over different architectures?
Is a machine WORD always the same or does it depend on the machine architecture?
And is the meaning of the word WORD context sensitive or generally applicable?

答: 16 bits (2 bytes) to a word is universal for x86.</p>

OwnerDisplayName: mixedpickles

ContentLicense: CC BY-SA 3.0

OwnerDisplayName: Nick

ContentLicense: CC BY-SA 2.5


问:
react Form.Control model/value mapping
just starting to use React and trying to create a simple page with an input and a button.

```<code>class Register extends React.Component  {
  constructor(props) {
    super(props);
    this.user = {};
  }
  register(user){
    console.log(user);
  }
  render() {
    return (
    ........
    <Form.Control type="email" placeholder="Email address" value={this.user.email}/>
    ........
    <Button onClick={ () => this.register(this.user)}> Sign Up </Button>
    )
  }
}
</code>```

I keep getting undefined when i tried to access {this.user.email}.
I'm coming from using Angular, so I've been used to using ng-model. What's the correct way to map the value so i can access it in the method 'register'?

答:
Try using State:</p>

```<code>const React = require('react');
const {render} = require('react-dom');

class Register extends React.Component  {
  constructor(props) {
    super(props);
    this.state = { user: {} };
  }
  register(user){
    console.log(user);
  }
  render() {
    return (
    <Form.Control type="email" placeholder="Email address" value={this.state.user.email}/>
    <Button onClick={ () => this.register(this.state.user)}> Sign Up </Button>
    )
  }
}

render(Register, document.getElementById('root'))
</code>```

Title: react Form.Control model/value mapping

Body:
just starting to use React and trying to create a simple page with an input and a button.

class Register extends React.Component  {
  constructor(props) {
    super(props);
    this.user = {};
  }
  register(user){
    console.log(user);
  }
  render() {
    return (
    ........
    <Form.Control type="email" placeholder="Email address" value={this.user.email}/>
    ........
    <Button onClick={ () => this.register(this.user)}> Sign Up </Button>
    )
  }
}

I keep getting undefined when i tried to access {this.user.email}.
I'm coming from using Angular, so I've been used to using ng-model. What's the correct way to map the value so i can access it in the method 'register'?

Body:
Try using State:

const React = require('react');
const {render} = require('react-dom');

class Register extends React.Component  {
  constructor(props) {
    super(props);
    this.state = { user: {} };
  }
  register(user){
    console.log(user);
  }
  render() {
    return (
    <Form.Control type="email" placeholder="Email address" value={this.state.user.email}/>
    <Button onClick={ () => this.register(this.state.user)}> Sign Up </Button>
    )
  }
}

render(Register, document.getElementById('root'))


问:
CSS dropdown menu disappears when using bootstrap carousel
I have a dropdown nav menu (using css from w3schools) that works fine until a carousel is put immediately after. Then the dropdown no longer shows and I do not know why.
I am new to css html .., so I don't find the solution to my problem. I have changed the Z-index and position on multiple classes and it doesn't solve the issue. Whenever i delete the bootstrap css link then the dropdown menu works again.
Do you have any suggestions?
thanks!

ps: i put all the code, sorry if i added more than the required, its my first time posting

/* CSS Document */

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.background-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), url("../img/header.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
}

.header-text {
  text-align: center;
  color: white;
  padding: 30px;
}

/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */

.topnav a:hover {
  background-color: #1C8CE8;
  text-decoration: none;
  color: black;
}

/* Add an active class to highlight the current page */

.activenav {
  background-color: #4F47E1;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */

.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Style the links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}

.carousel {
  max-width: 100% !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.carousel-inner>.item>img {
  height: 600px!important;
  width: 100%;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

  <nav class="topnav" id="myTopnav">
    Home
    <div class="dropdown">
      <button class="dropbtn">Products
            <i class="fa fa-caret-down"></i>
        </button>
      <div class="dropdown-content">
        Make
        Model
        Year
      </div>
    </div>
    News
    About
    Contact us
    <i class="fa fa-bars"></i>
  </nav>
  <section id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="img/img1slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

      <div class="item">
        <img src="img/img2slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

      <div class="item">
        <img src="img/img3slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

    </div></code>```

答:
You done changes to code. If you use direct code it will works.

<!DOCTYPE html>

  <title></title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

      Home

        Products

 Make

Model

Year

News

About

Contact

    Previous

    Next

```

Body:
I have a dropdown nav menu (using css from w3schools) that works fine until a carousel is put immediately after. Then the dropdown no longer shows and I do not know why.
I am new to css html .., so I don't find the solution to my problem. I have changed the Z-index and position on multiple classes and it doesn't solve the issue. Whenever i delete the bootstrap css link then the dropdown menu works again.
Do you have any suggestions?
thanks!

ps: i put all the code, sorry if i added more than the required, its my first time posting

/* CSS Document */

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.background-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), url("../img/header.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
}

.header-text {
  text-align: center;
  color: white;
  padding: 30px;
}

/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */

.topnav a:hover {
  background-color: #1C8CE8;
  text-decoration: none;
  color: black;
}

/* Add an active class to highlight the current page */

.activenav {
  background-color: #4F47E1;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */

.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Style the links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}

.carousel {
  max-width: 100% !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.carousel-inner>.item>img {
  height: 600px!important;
  width: 100%;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    Home

      <button class="dropbtn">Products

        </button>

        Make
        Model
        Year

    News
    About
    Contact us

title

paragraph

title

paragraph

title

paragraph

Body:
You done changes to code. If you use direct code it will works.

<!DOCTYPE html>
<html>
<head>
  <title></title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
  /* CSS Document */

</style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Home</a>
    </div>
    <ul class="nav navbar-nav">

      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#"> Make</a></li>
          <li><a href="#">Model</a></li>
          <li><a href="#">Year</a></li>
        </ul>
      </li>
      <li><a href="#">News</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://dummyimage.com/600x400/2ade48/fff" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="https://dummyimage.com/600x400/e02ae0/fff" alt="Chicago">
    </div>

    <div class="item">
      <img src="https://dummyimage.com/600x400/000/fff" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</body>
</html>


问:
How to combine 2 function with 1 function in the javascript?
I am creating the function to save data using javascript pass to backend. Now I need to combine two function with 1 function in the javascript. Because I want to click one button can run the two functions.

First function - The first function is once I've clicked the button, the images will show in the page then pass to backend to do the save function.

function save_qr(form) {
                html2canvas($("#createImg"), {
                    onrendered: function(canvas) {
                        var imgsrc = canvas.toDataURL("image/png");
                        console.log(imgsrc);
                        $("#newimg").attr('src', imgsrc);
                        $("#img").show();
                        var dataURL = canvas.toDataURL();
                        $.ajax({
                            type: "POST",
                            url: "?f=" + loc,
                            data: {
                                imgBase64: dataURL
                            }
                        }).done(function(o) {
                            console.log('saved');
                        });
                    }
                });
}
```

<p><code>Second function</code>- This function will pass to backend to do insert form data function. </p>

<pre class="lang-html prettyprint-override"><code>function save_qr(form) {
    var error_msg = new Array();
    $("#" + form + " .blank").each(function() {
        if ($.trim($(this).val()) == "") {
            error_msg.push("The " + $(this).attr("title") + " should not be blank.");
        }
    });
    var loc = getQueryVariable('loc');
    var serialized = $('#' + form).serialize();
    var extra = '&action=save';
    var form_data = serialized + extra;
    if (error_msg.length < 1) {
        $.ajax({
            type: 'POST',
            url: "?f=" + loc,
            data: form_data,
            beforeSend: function() {
                show_overLay();
            },
            success: function(data) {
                if (data) {
                    console.log(data);
                    hide_overLay(data);
                    //$('#save').prop('disabled',true);
                    window.location = "?loc=" + loc;
                } else {
                    hide_overLay(data);
                }
            }
        });
    } else {
        alert(error_msg.join("\n"));
    }
}
</code>```

That means I want to do the first function first to show the image first then to do the second function. The url using same location backend within in the two functions. Hope someone can guide me how to combine these two function with 1 function. Thanks.

Note：These two functions are worked if do it separate.

ERROR:

答:
Am I just blind or is it that simply. Rename the functions to save_qr1 and save_qr2 (Currently the functions have the same name) and use them in a new full_save_qr function:

```<code>function full_save_qr(form) {
  save_qr1(form);
  save_qr2(form);
}
</code>```

The functions are processes synchronous. That means your save_qr1 will be processed before save_qr2. If you want a specific time to happen between the two functions you need to use something like setTimeout

```<code>function full_save_qr(form) {
  save_qr1(form);
  setTimeout(() => save_qr2(form), 1000);
}
</code>```

Body:
I am creating the function to save data using javascript pass to backend. Now I need to combine two function with 1 function in the javascript. Because I want to click one button can run the two functions.

First function - The first function is once I've clicked the button, the images will show in the page then pass to backend to do the save function.

function save_qr(form) {
                html2canvas($("#createImg"), {
                    onrendered: function(canvas) {
                        var imgsrc = canvas.toDataURL("image/png");
                        console.log(imgsrc);
                        $("#newimg").attr('src', imgsrc);
                        $("#img").show();
                        var dataURL = canvas.toDataURL();
                        $.ajax({
                            type: "POST",
                            url: "?f=" + loc,
                            data: {
                                imgBase64: dataURL
                            }
                        }).done(function(o) {
                            console.log('saved');
                        });
                    }
                });
}

Second function- This function will pass to backend to do insert form data function.

function save_qr(form) {
    var error_msg = new Array();
    $("#" + form + " .blank").each(function() {
        if ($.trim($(this).val()) == "") {
            error_msg.push("The " + $(this).attr("title") + " should not be blank.");
        }
    });
    var loc = getQueryVariable('loc');
    var serialized = $('#' + form).serialize();
    var extra = '&action=save';
    var form_data = serialized + extra;
    if (error_msg.length < 1) {
        $.ajax({
            type: 'POST',
            url: "?f=" + loc,
            data: form_data,
            beforeSend: function() {
                show_overLay();
            },
            success: function(data) {
                if (data) {
                    console.log(data);
                    hide_overLay(data);
                    //$('#save').prop('disabled',true);
                    window.location = "?loc=" + loc;
                } else {
                    hide_overLay(data);
                }
            }
        });
    } else {
        alert(error_msg.join("\n"));
    }
}

That means I want to do the first function first to show the image first then to do the second function. The url using same location backend within in the two functions. Hope someone can guide me how to combine these two function with 1 function. Thanks.

Note：These two functions are worked if do it separate.

ERROR:

Body:
Am I just blind or is it that simply. Rename the functions to save_qr1 and save_qr2 (Currently the functions have the same name) and use them in a new full_save_qr function:

function full_save_qr(form) {
  save_qr1(form);
  save_qr2(form);
}

The functions are processes synchronous. That means your save_qr1 will be processed before save_qr2. If you want a specific time to happen between the two functions you need to use something like setTimeout

function full_save_qr(form) {
  save_qr1(form);
  setTimeout(() => save_qr2(form), 1000);
}


问:
Hot Reload shows blank screen in Electron Svelte with svelte-routing
I am working on an Electron.js application, utilizing Svelte as my frontend framework.

I'm using hot reload with chikidar, but every time I reload it shows a white blank screen, and I get an error in the devtools: Not allowed to load local resource: file:///

I think this is because I use the svelte-routing package, and do something wrong with it.
When I first start the app, the window location is :file:///path/to/project/public/index.html,
but after the first svelte-routing link is used, it changes to: file:///.

What am I doing wrong?

答: Because it's an electron app, url doesn't really matter, I store the current page name in a Svelte store, and I have an if-else block for choosing which page to display</p>


问:
Convert bigint value formatted as 20200321 to datetime formatted as '2020-03-21 00:00:00'
How do we convert the bigint value 20200321 which is a date(2020-03-21 i.e., 21st March, 2020) to datetime format '2020-03-21 00:00:00' so that we can map with other tables

答:
You can simply cast it like this :

```<code>select cast('20200321' as datetime2)
</code>```

SQL Here

Body:
You can simply cast it like this :

select cast('20200321' as datetime2)

SQL Here


问:
Javascript drop down menu for wordpress
I'm trying to create a javascript menu for my menu I posted a question the other day about a css drop-down but its just to tricky to do that.

Instead I'm thinking script, can someone give me a suitable javascript code that might work in IE? Here is a link to my test website.

I've tried various other jQuery, but they all rely on the parent ul being a class but as its dynamic content I'm not able to change this / don't want to because I would have to change it for each website and every other website I make. If you have a look at the source code on this website you can see what I mean. The website is quite well comented and you can view the menu online 128 roughly and I can't stress enough how this must be compatible in IE.

答:
There are many plugins available
1-
Dropdown Menu Widget
2-Wordpress CSS Dropdown Menu
3-Ryans Wordpress Dropdown Menu
 4-Wordpress Superfish

Title: Javascript drop down menu for wordpress


问:
Google PlacePicker Closes After Launch with resultCode 2
After clicking on add location button, the Map app opens and immediately closes again.

The result code in the onActivityResult is 2.

Log Statement:

2020-05-31 08:18:41.451 17063-17063/com.example.shushme D/MainActivity: API Client Connection Successful!

2020-05-31 08:18:42.187 17063-17063/com.example.shushme D/MainActivity: startActivityForResult i: Intent { act=com.google.android.gms.location.places.ui.PICK_PLACE pkg=com.google.android.gms (has extras) }

2020-05-31 08:18:42.208 17063-17063/com.example.shushme D/MainActivity: startActivityForResult called

2020-05-31 08:18:42.786 17063-17063/com.example.shushme D/MainActivity: onActivityResult requestCode: 100 resultCode: 2 data: null

I changed my API key many times but still issue occurs.  I developed the SHA-1 fingerprint and added in my developer console also.

I have uploaded my code on github

GitHub Link: https://github.com/yashth/ShushMe

Please check my code and tell me what went wrong, I have already done all the steps mentioned in similar issues but still no luck.

答:
Upon checking your code, it seems that you are still using the old Places SDK for Android com.google.android.gms:play-services-places. This version of Places SDK for Android has been turned off last July 29, 2019. There is a new version of the SDK com.google.android.libraries.places:places that is currently available and you need to migrate your implementation to the newer version to avoid issues.

Also, as per the documentation, Place Picker is no longer avaialble in the new version of Places SDK for Android. You need to use Place Autocomplete instead.

You can checkout sample implementation of the new Places SDK for Android here: https://github.com/googlemaps/android-places-demos

Hope this helps!


答:
Simply add global variable like var isImageShow = false. Call wrap your code like

```<code>var isImageShow = false;
function save_qr(form) {
    if (!isImageShow) {
        isImageShow = true;
        // 1st function code
    } else {
        // 2nd function code
    }
}
</code>```

If you want to check condition on dataURL then declare dataURL as global variable. And update condition as if(!dataURL). Also update var dataURL = canvas.toDataURL(); to dataURL = canvas.toDataURL(); so it will use globally declared dataURL.

```<code>var dataURL = "";
function save_qr(form) {
    if (!dataURL) {
        html2canvas($("#createImg"), {
            onrendered: function(canvas) {
                var imgsrc = canvas.toDataURL("image/png");
                console.log(imgsrc);
                $("#newimg").attr('src', imgsrc);
                $("#img").show();
                dataURL = canvas.toDataURL(); // removed var from here.
                $.ajax({
                    type: "POST",
                    url: "?f=" + loc,
                    data: {
                        imgBase64: dataURL
                    }
                }).done(function(o) {
                    console.log('saved');
                });
            }
        });
    } else {
        // 2nd function code
    }
}
</code>```

Title: How to combine 2 function with 1 function in the javascript?

Body:
Simply add global variable like var isImageShow = false. Call wrap your code like

var isImageShow = false;
function save_qr(form) {
    if (!isImageShow) {
        isImageShow = true;
        // 1st function code
    } else {
        // 2nd function code
    }
}

If you want to check condition on dataURL then declare dataURL as global variable. And update condition as if(!dataURL). Also update var dataURL = canvas.toDataURL(); to dataURL = canvas.toDataURL(); so it will use globally declared dataURL.

var dataURL = "";
function save_qr(form) {
    if (!dataURL) {
        html2canvas($("#createImg"), {
            onrendered: function(canvas) {
                var imgsrc = canvas.toDataURL("image/png");
                console.log(imgsrc);
                $("#newimg").attr('src', imgsrc);
                $("#img").show();
                dataURL = canvas.toDataURL(); // removed var from here.
                $.ajax({
                    type: "POST",
                    url: "?f=" + loc,
                    data: {
                        imgBase64: dataURL
                    }
                }).done(function(o) {
                    console.log('saved');
                });
            }
        });
    } else {
        // 2nd function code
    }
}


问:
function for the sum of all even numbers
I wanted to create a function which take a string of any numbers and characters as a one parameter. the task is  to find all the even numbers(digits) and sum them up then display the total value in console.
for example, if the following string  is passed to this function as a one parameter ("112,sf34,4)-k)") the result should be :    The sum of  all even  numbers: 10

So far I have come with solution and solve after this. Help me. Thanks in advance.

```<code>function functionFive(str) {
    const string = [...str].map(char => {
        const numberString = char.match(/^\d+$/)
        if (numberString !== null){
            const number = parseInt(numberString)
            return number
        }

    const num = string.map(number=>{
        if (number !== undefined && number%2 === 0){
             console.log(number)
        }
    })
}
functionFive("sau213e89q8e7ey1")
</code>```

答:
Using Regular expressions</p>

```<code>const functionFive = str => (str.match(/\d/g)||[]).reduce((a,b)=>a=parseFloat(a)+(parseFloat(b)%2==0?parseFloat(b):0),0);

console.log(functionFive("112,sf34,4)-k)"))
</code>```

Body:
I wanted to create a function which take a string of any numbers and characters as a one parameter. the task is  to find all the even numbers(digits) and sum them up then display the total value in console.
for example, if the following string  is passed to this function as a one parameter ("112,sf34,4)-k)") the result should be :    The sum of  all even  numbers: 10

So far I have come with solution and solve after this. Help me. Thanks in advance.

function functionFive(str) {
    const string = [...str].map(char => {
        const numberString = char.match(/^\d+$/)
        if (numberString !== null){
            const number = parseInt(numberString)
            return number
        }

    const num = string.map(number=>{
        if (number !== undefined && number%2 === 0){
             console.log(number)
        }
    })
}
functionFive("sau213e89q8e7ey1")

Body:
Using Regular expressions

const functionFive = str => (str.match(/\d/g)||[]).reduce((a,b)=>a=parseFloat(a)+(parseFloat(b)%2==0?parseFloat(b):0),0);

console.log(functionFive("112,sf34,4)-k)"))


问:
How to design the autocomplete suggestion box - jQuery - Django
I build an autocomplete function with jQuery and it's working fine but now I want to design the suggestion box which appears if you type in something. I also want to make some changes like how many results should be displayed.

```<code>$(function() {
    $("#search_input").autocomplete({
        source: "request",
        select: function (event, ui) { //item selected
            AutoCompleteSelectHandler(event, ui)
        },
        minLength: 3,
});
});

function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
}
</code>```

This is my jQuery function

This is how the suggestion box looks like.

How can I design it ? I also want to adjust the amount of results which I get displayed.

答: I was able to adjust the amount of results which I get displayed by filtering them in my python script.</p>

Body:
I build an autocomplete function with jQuery and it's working fine but now I want to design the suggestion box which appears if you type in something. I also want to make some changes like how many results should be displayed.

$(function() {
    $("#search_input").autocomplete({
        source: "request",
        select: function (event, ui) { //item selected
            AutoCompleteSelectHandler(event, ui)
        },
        minLength: 3,
});
});

function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
}

This is my jQuery function

This is how the suggestion box looks like.

How can I design it ? I also want to adjust the amount of results which I get displayed.


问:
req.body empty on posts
All of a sudden this has been happening to all my projects.

Whenever I make a post in nodejs using express and body-parser req.body is an empty object.

```<code>var express    = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded())

// parse application/json
app.use(bodyParser.json())

app.listen(2000);

app.post("/", function (req, res) {
  console.log(req.body) // populated!
  res.send(200, req.body);
});
</code>```

Via ajax and postman it's always empty.

However via curl

```<code>$ curl -H "Content-Type: application/json" -d '{"username":"xyz","password":"xyz"}' http://localhost:2000/
</code>```

it works as intended.

I tried manually setting Content-type :  application/json in the former but I then always get 400 bad request

This has been driving me crazy.

I thought it was that something updated in body-parser but I downgraded and it didn't help.

Any help appreciated, thanks.

答:
My problem was creating the route first
    require("./routes/routes")(app);
I shifted it to the end of the code before
    app.listen
and it worked!

Title: req.body empty on posts

Body:
All of a sudden this has been happening to all my projects.

Whenever I make a post in nodejs using express and body-parser req.body is an empty object.

var express    = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded())

// parse application/json
app.use(bodyParser.json())

app.listen(2000);

app.post("/", function (req, res) {
  console.log(req.body) // populated!
  res.send(200, req.body);
});

Via ajax and postman it's always empty.

However via curl

$ curl -H "Content-Type: application/json" -d '{"username":"xyz","password":"xyz"}' http://localhost:2000/

it works as intended.

I tried manually setting Content-type :  application/json in the former but I then always get 400 bad request

This has been driving me crazy.

I thought it was that something updated in body-parser but I downgraded and it didn't help.

Any help appreciated, thanks.


问:
How to Create MDI Child of different type with Generics?
I need to centralize the MDI Child Forms creation into a unique procedure in Delphi (VCL). The idea is to do some actions every time an MDI Child Form is created no matter its type, i.e., to add its caption name into a List to get access to that MDI child form. Like this:

```<code>   procedure TMainForm<T>.CreateMDIChild(const ACaption : String);
    var
      Child: T;
    begin
      { create a new MDI child window }
      Child := T.Create(Application);
      Child.Caption := ACaption;
      // add this child to the list of active MDI windows
      ...
    end;

   procedure TMainForm.Button1Click(Sender : TObject);
   begin
       CreateMDIChild<TMdiChild1>('Child type 1');
       CreateMDIChild<TMdiChild2>('Child type 2');
       ...
</code>```

But, I don't have experience with generics. Any help I'll appreciate it.
Thank you so much.

答:
You can use classes from unit System.Generics.Collections. For example, for resolving similar task I use TObjectList<TfmMDIChild>, where TfmMDIChild my own class.
Another useful tip you can make your own class for holding collection based on TObjectList.
I made something like this:

```<code>  TWindowList = class(TObjectList<TfmMDIChild>)
  public
    procedure RefreshGrids;
    function FindWindow(const AClassName: string; AObjCode: Integer = 0): TfmMDIChild;
    procedure RefreshWindow(const AClassName: string; AObjForRefresh: integer = 0; AObjCode: Integer = 0);
    procedure RefreshToolBars;
  end;
</code>```

Body:
I need to centralize the MDI Child Forms creation into a unique procedure in Delphi (VCL). The idea is to do some actions every time an MDI Child Form is created no matter its type, i.e., to add its caption name into a List to get access to that MDI child form. Like this:

   procedure TMainForm<T>.CreateMDIChild(const ACaption : String);
    var
      Child: T;
    begin
      { create a new MDI child window }
      Child := T.Create(Application);
      Child.Caption := ACaption;
      // add this child to the list of active MDI windows
      ...
    end;

   procedure TMainForm.Button1Click(Sender : TObject);
   begin
       CreateMDIChild<TMdiChild1>('Child type 1');
       CreateMDIChild<TMdiChild2>('Child type 2');
       ...

But, I don't have experience with generics. Any help I'll appreciate it.
Thank you so much.

Body:
You can use classes from unit System.Generics.Collections. For example, for resolving similar task I use TObjectList<TfmMDIChild>, where TfmMDIChild my own class.
Another useful tip you can make your own class for holding collection based on TObjectList.
I made something like this:

  TWindowList = class(TObjectList<TfmMDIChild>)
  public
    procedure RefreshGrids;
    function FindWindow(const AClassName: string; AObjCode: Integer = 0): TfmMDIChild;
    procedure RefreshWindow(const AClassName: string; AObjForRefresh: integer = 0; AObjCode: Integer = 0);
    procedure RefreshToolBars;
  end;


问:
How can I loop over sub folders in Assets folder?
```<code>string selectedPath = GetPath();
var subFolders = AssetDatabase.GetSubFolders(selectedPath);
List<string> paths = new List<string>();
foreach(string path in subFolders)
{
    paths.Add(path);
}
</code>```

For example the subFolders is Assets/My Folder
but under My Folder there are many more subfolders.

AssetDatabase.GetSubFolders don't make recursive it's getting the first sub folder only.
I want to get all the sub folders recursive.

I tried :

List paths = new List();
foreach(string path in subFolders)
{
    paths.Add(path);
}

but it's still giving me only the first sub folder.

This is how I'm getting the selected path name in the Assets :

[MenuItem("Assets/Get Path")]
private static string GetClickedDirFullPath()
{
    string clickedAssetGuid = Selection.assetGUIDs[0];
    string clickedPath = AssetDatabase.GUIDToAssetPath(clickedAssetGuid);
    string clickedPathFull = Path.Combine(Directory.GetCurrentDirectory(), clickedPath);

    FileAttributes attr = File.GetAttributes(clickedPathFull);
    return attr.HasFlag(FileAttributes.Directory) ? clickedPathFull : Path.GetDirectoryName(clickedPathFull);
}

[MenuItem("Assets/Get Path")]
private static string GetPath()
{
    string path = GetClickedDirFullPath();
    int index = path.IndexOf("Assets");
    string result = path.Substring(index);

    return result;
}
```

答:
Try  this code for get recursive folder path</p>

```<code>    //this is your code
    string selectedPath = GetPath();
    var subFolders = AssetDatabase.GetSubFolders(selectedPath);
    List<string> paths = new List<string>();
    if(subFolders != null)
    {
        foreach(string path in subFolders)
        {
            GetAllRecursiveFolder(path,ref paths);
        }
    }
    else
    {
        paths.add(selectedPath);
    }

    public void GetAllRecursiveFolder(string currentPath,ref List<string> paths)
    {

        var subFolders = AssetDatabase.GetSubFolders(currentPath);
        if(subFolders != null)
        {
            foreach(string path in subFolders)
            {
                GetAllRecursiveFolder(path,ref paths);// Get recursive folder path, and stored in ref variable
            }
        }
        else
        {
            paths.add(currentPath);
        }

    }
</code>```

Body:
string selectedPath = GetPath();
var subFolders = AssetDatabase.GetSubFolders(selectedPath);
List<string> paths = new List<string>();
foreach(string path in subFolders)
{
    paths.Add(path);
}

For example the subFolders is Assets/My Folder
but under My Folder there are many more subfolders.

AssetDatabase.GetSubFolders don't make recursive it's getting the first sub folder only.
I want to get all the sub folders recursive.

I tried :

List paths = new List();
foreach(string path in subFolders)
{
    paths.Add(path);
}

but it's still giving me only the first sub folder.

This is how I'm getting the selected path name in the Assets :

[MenuItem("Assets/Get Path")]
private static string GetClickedDirFullPath()
{
    string clickedAssetGuid = Selection.assetGUIDs[0];
    string clickedPath = AssetDatabase.GUIDToAssetPath(clickedAssetGuid);
    string clickedPathFull = Path.Combine(Directory.GetCurrentDirectory(), clickedPath);

    FileAttributes attr = File.GetAttributes(clickedPathFull);
    return attr.HasFlag(FileAttributes.Directory) ? clickedPathFull : Path.GetDirectoryName(clickedPathFull);
}

[MenuItem("Assets/Get Path")]
private static string GetPath()
{
    string path = GetClickedDirFullPath();
    int index = path.IndexOf("Assets");
    string result = path.Substring(index);

    return result;
}

Body:
Try  this code for get recursive folder path

    //this is your code
    string selectedPath = GetPath();
    var subFolders = AssetDatabase.GetSubFolders(selectedPath);
    List<string> paths = new List<string>();
    if(subFolders != null)
    {
        foreach(string path in subFolders)
        {
            GetAllRecursiveFolder(path,ref paths);
        }
    }
    else
    {
        paths.add(selectedPath);
    }

    public void GetAllRecursiveFolder(string currentPath,ref List<string> paths)
    {

        var subFolders = AssetDatabase.GetSubFolders(currentPath);
        if(subFolders != null)
        {
            foreach(string path in subFolders)
            {
                GetAllRecursiveFolder(path,ref paths);// Get recursive folder path, and stored in ref variable
            }
        }
        else
        {
            paths.add(currentPath);
        }

    }


问:
How to stop leaflet map to overlap other elements
I have a leaflet map that is overlapping other elements on scroll, so what is leaflet default high z-index or is there any other way to keep it contained( My css skills are not that good)

答: It should be possible to do with z-index. The leaflet container needs to have a lower z-index, than the other elements. </p>


问:
Does a separate agent need to be installed for environments in Azure Devops? (when deployment agents already installed)
I've been looking at trying the new Environments feature in Azure Devops documented here

I looked at setting one up through the UI and it gives a bash script to install the agent like what I've put below:

```<code>mkdir azagent;cd azagent;curl -fkSL -o vstsagent.tar.gz https://vstsagentpackage.azureedge.net/agent/2.169.1/vsts-agent-linux-x64-2.169.1.tar.gz;tar -zxvf vstsagent.tar.gz; if [ -x "$(command -v systemctl)" ]; then ./config.sh --environment --environmentname "SIT" --acceptteeeula --agent $HOSTNAME --url <Our URL> --work _work --projectname <project name> --auth PAT --token <PAT Token> --runasservice; sudo ./svc.sh install; sudo ./svc.sh start; else ./config.sh --environment --environmentname "Dev" --acceptteeeula --agent $HOSTNAME --url <Our URL> --work _work --projectname 'Beehive' --auth PAT --token <PAT Token>; ./run.sh; fi
</code>```

This looks like it will install the agent for you. However I already have deployment agents installed on this machine and don't want to replace it for now. Do I have to install a separate agent for these environments or can I configure the current deployment agents to use environments as well?

Hope this is clear

答:
Do I have to install a separate agent for these environments or can I configure the current deployment agents to use environments as well?

The answer is yes. We have to install a separate agent for these environments, could not configure the current deployment agents to use environments.

That because the Environments and Deployment agents are different.

Deployment groups:

A deployment group is a logical set of deployment target machines that have agents installed on each one. Deployment groups represent the physical environments; for example, “Dev”, “Test”, “UAT”, and “Production”. In effect, a deployment group is just another grouping of agents, much like an agent pool.

Environments:

Environment represents a collection of resources such as namespaces within Kubernetes clusters, Azure Web Apps, virtual machines, databases, which can be targeted by deployments from a pipeline.

They both have the same theory in actual deployment. But, since Deployment group jobs are not yet supported in YAML. In this case, the Environments comes up.

While environment at its core is a grouping of resources, the resources themselves represent actual deployment targets.

There are some other differences, for example, we cannot create the deployment group directly in the pipeline, but we can create environments directly in pipeline. And environment can record the commit / work item during deployment. It is more convenient to track code changes, bug fixes, etc.

So, we could not configure the current deployment agents to use environments.

Hope this helps.

Body:
I've been looking at trying the new Environments feature in Azure Devops documented here

I looked at setting one up through the UI and it gives a bash script to install the agent like what I've put below:

mkdir azagent;cd azagent;curl -fkSL -o vstsagent.tar.gz https://vstsagentpackage.azureedge.net/agent/2.169.1/vsts-agent-linux-x64-2.169.1.tar.gz;tar -zxvf vstsagent.tar.gz; if [ -x "$(command -v systemctl)" ]; then ./config.sh --environment --environmentname "SIT" --acceptteeeula --agent $HOSTNAME --url <Our URL> --work _work --projectname <project name> --auth PAT --token <PAT Token> --runasservice; sudo ./svc.sh install; sudo ./svc.sh start; else ./config.sh --environment --environmentname "Dev" --acceptteeeula --agent $HOSTNAME --url <Our URL> --work _work --projectname 'Beehive' --auth PAT --token <PAT Token>; ./run.sh; fi

This looks like it will install the agent for you. However I already have deployment agents installed on this machine and don't want to replace it for now. Do I have to install a separate agent for these environments or can I configure the current deployment agents to use environments as well?

Hope this is clear


问:
Requesting an advice on big data validation
I'm a newbie on big data validation and processing. Having little understanding about datacompy, which I have used to compare two datasets (pandas). However I couldn't find any source that can do data validations, i.e. column validations on emails, non emails, null, currency and date/time formats with python

e.g. Validation required on below sample data:

```<code>Address
-------
AAA AAA AAA
BBBB B bbbb
CCC CCCCCCC
abc@dbv.com
dews@fggv.uk
ASAA asas dasd
</code>```

The data set I got contains email addresses under 'Address' column and need to validate, whether emails present in 'Address' column. 'Emil' column need to validate vice versa.

Also I prefer to return rows of invalids in the result (similarly datcompy compare.report, which output entire rows of mismatched ones).

I have tried Deequ with scala and the validations successfully state if validation errors found. However it is difficult to figure out the exact rows with invalid data.

Appreciate if some one can guide me a reference, course or any other tool, language on this purpose. Preferred a solution on python or Deequ/scala.

答:
Pandas gave me the solution as below</p>

```<code>data = pd.read_csv("data.csv", sep='\t')
x = data[data['Email'].str.match(r'(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)')]
</code>```

Body:
I'm a newbie on big data validation and processing. Having little understanding about datacompy, which I have used to compare two datasets (pandas). However I couldn't find any source that can do data validations, i.e. column validations on emails, non emails, null, currency and date/time formats with python

e.g. Validation required on below sample data:

Address
-------
AAA AAA AAA
BBBB B bbbb
CCC CCCCCCC
abc@dbv.com
dews@fggv.uk
ASAA asas dasd

The data set I got contains email addresses under 'Address' column and need to validate, whether emails present in 'Address' column. 'Emil' column need to validate vice versa.

Also I prefer to return rows of invalids in the result (similarly datcompy compare.report, which output entire rows of mismatched ones).

I have tried Deequ with scala and the validations successfully state if validation errors found. However it is difficult to figure out the exact rows with invalid data.

Appreciate if some one can guide me a reference, course or any other tool, language on this purpose. Preferred a solution on python or Deequ/scala.

Body:
Pandas gave me the solution as below

data = pd.read_csv("data.csv", sep='\t')
x = data[data['Email'].str.match(r'(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)')]


问:
List.js addEventListener and .on() not working
Trying to figure out a way to use addEventListener with List.js

I have a page with some text and buttons

I'm then loading List.js file which paginates these elements and allows for sorting.

I'm adding an event listener to all those buttons when the main script file loads.

Order of JS loading:

1 - List.js

2 - List.js scripts file (with list js functions like creating the list etc)

3 - Main scripts file (with main JS code, including addEventListener code)

If I load the main scripts file first, then the event listener doesn't get created(i believe it gets refreshed when List.js loads and creates the different pagination pages.

With the files ordered the way I have above, the event listener only gets created and can be used for the first page of the list, if I switch to page 2,3,...they event listener doesn't get created for the button. I see that the elements for the other pages are actually dynamically created so that's why the addEventListener doesn't work.

My current solution has been to use onclick="myfunction(event)" on all the buttons, so that when Listjs generates the list items it has the function attached inline, but though this works fine I find it a bit hacky.

I see List.js has a method called .on() but I can't seem to get it to work either.

My code:

```<code>var menuList = new List('menu-items', {
    valueNames: ['menu-item'],
    page: 3,
    pagination: true
  });

function log_console(){
    return console.log('list updated!');
} //tried this, doesn't work

//menuList.on('updated', log_console);

menuList.on('updated', function(menuList){
    return console.log('list updated');
}); //this doesn't work either
</code>```

From what I can get from the docs, this should be fired every whenever lists are updated, which Seems to be what happens when I switch from page 1 to page 2 of the list (it replaces the HTML).

I also tried a different event which I assume should work when I use the search box but nothing happens:

```<code>menuList.on('searchStart', function(menuList){
  return console.log('list updated');
}); //doesn't log anything enither
</code>```

How do I go about using this ListJs .on() method? I'd use it to create the event listener everytime a user switches the page and the list gets generated, something like this:

```<code>menuList.on('updated', function(menuList){
  const btns = document.querySelectorAll('.add-btns');
  btns.forEach(button => button.addEventListener('click', myfunction));
});
</code>```

答:
Looking at the API, You don't need to approach it from an .on, the onclick method is enough.

Here is a solution. Click on Run Snippet(in full page is better) and enjoy a working example!

const options = {
  pagination: true,
  page: 1,
  plugins: [
     ListPagination({})
 ],
  valueNames: [ 'name', 'city' ],
  item: '

<button onclick="handleClick(this)">Log and Delete</button>
'
};
const values = [
  { name: 'Lucas', city:'Stockholm' }
  ,{ name: 'Jonas', city:'Berlin' }
];
const hackerList = new List('hacker-list', options, values);

function handleClick(node) {
  const list = node.parentNode;
  console.log(list);
  console.log(hackerList);
  //Delete example
  const name = list.querySelector(".name").innerHTML
  console.log(name);
  hackerList.remove("name", name);
}

hackerList.on('updated', console.log);
hackerList.add({ name: "Jonny", city: "Stockholm" });```
<pre class="snippet-code-css lang-css prettyprint-override"><code>h2 {
  font-family:sans-serif;
}
.list {
  font-family:sans-serif;
  margin:0;
  padding:20px 0 0;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.avatar {
  max-width: 150px;
}
img {
  max-width: 100%;
}
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
p {
  margin:0;
}

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
  margin-bottom:10px
}
input:focus {
  outline:none;
  border-color:#aaa;
}
.sort {
  padding:8px 30px;
  border-radius: 6px;
  border:none;
  display:inline-block;
  color:#fff;
  text-decoration: none;
  background-color: #28a8e0;
  height:30px;
}
.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}
.sort:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:13px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}</code>```

<input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

```

Hope this helps!

Body:
Trying to figure out a way to use addEventListener with List.js

I have a page with some text and buttons

I'm then loading List.js file which paginates these elements and allows for sorting.

I'm adding an event listener to all those buttons when the main script file loads.

Order of JS loading:

1 - List.js

2 - List.js scripts file (with list js functions like creating the list etc)

3 - Main scripts file (with main JS code, including addEventListener code)

If I load the main scripts file first, then the event listener doesn't get created(i believe it gets refreshed when List.js loads and creates the different pagination pages.

With the files ordered the way I have above, the event listener only gets created and can be used for the first page of the list, if I switch to page 2,3,...they event listener doesn't get created for the button. I see that the elements for the other pages are actually dynamically created so that's why the addEventListener doesn't work.

My current solution has been to use onclick="myfunction(event)" on all the buttons, so that when Listjs generates the list items it has the function attached inline, but though this works fine I find it a bit hacky.

I see List.js has a method called .on() but I can't seem to get it to work either.

My code:

var menuList = new List('menu-items', {
    valueNames: ['menu-item'],
    page: 3,
    pagination: true
  });

function log_console(){
    return console.log('list updated!');
} //tried this, doesn't work

//menuList.on('updated', log_console);

menuList.on('updated', function(menuList){
    return console.log('list updated');
}); //this doesn't work either

From what I can get from the docs, this should be fired every whenever lists are updated, which Seems to be what happens when I switch from page 1 to page 2 of the list (it replaces the HTML).

I also tried a different event which I assume should work when I use the search box but nothing happens:

menuList.on('searchStart', function(menuList){
  return console.log('list updated');
}); //doesn't log anything enither

How do I go about using this ListJs .on() method? I'd use it to create the event listener everytime a user switches the page and the list gets generated, something like this:

menuList.on('updated', function(menuList){
  const btns = document.querySelectorAll('.add-btns');
  btns.forEach(button => button.addEventListener('click', myfunction));
});

Body:
Looking at the API, You don't need to approach it from an .on, the onclick method is enough.

Here is a solution. Click on Run Snippet(in full page is better) and enjoy a working example!

const options = {
  pagination: true,
  page: 1,
  plugins: [
     ListPagination({})
 ],
  valueNames: [ 'name', 'city' ],
  item: '<li><h3 class="name"></h3><p class="city"></p><button onclick="handleClick(this)">Log and Delete</button></li>'
};
const values = [
  { name: 'Lucas', city:'Stockholm' }
  ,{ name: 'Jonas', city:'Berlin' }
];
const hackerList = new List('hacker-list', options, values);

function handleClick(node) {
  const list = node.parentNode;
  console.log(list);
  console.log(hackerList);
  //Delete example
  const name = list.querySelector(".name").innerHTML
  console.log(name);
  hackerList.remove("name", name);
}

hackerList.on('updated', console.log);
hackerList.add({ name: "Jonny", city: "Stockholm" });

h2 {
  font-family:sans-serif;
}
.list {
  font-family:sans-serif;
  margin:0;
  padding:20px 0 0;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.avatar {
  max-width: 150px;
}
img {
  max-width: 100%;
}
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
p {
  margin:0;
}

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
  margin-bottom:10px
}
input:focus {
  outline:none;
  border-color:#aaa;
}
.sort {
  padding:8px 30px;
  border-radius: 6px;
  border:none;
  display:inline-block;
  color:#fff;
  text-decoration: none;
  background-color: #28a8e0;
  height:30px;
}
.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}
.sort:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:13px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>
<div id="hacker-list">
<input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <ul class="list">
  </ul>
  <ul class="pagination"></ul>
</div>

Hope this helps!


问:
Do not know how to implement a thing in a homework task
Now, the question is :

Assemble a program that will simulate the work of automatic telephone exchanges. For example, there are 10 subscribers, anyone can call anyone, Each has several conditions:
waiting for an answer, calls, says, free. They randomly call each other, the program should show the operation of this system.

And, I figured out how to do some of it, but, don't know how to exactly implement it.

```<code>    #include <cstdlib>
    #include <chrono>
    #include <random>
    #include <string>
    using namespace std;

    int i, a;
    string state[4]{ "free", "waiting", "calling", "talking" };
    int states[4]{ 1,2,3,4 };
    int subs[10]{ 1,2,3,4,5,6,7,8,9,10 };

    int main(int subs[10], int states[4], string state[4])
    {
        srand(time(nullptr));
        for (int x = 0; x < subs[10]; x++)
        {
            states[i] = rand() % 4;
            states[i] = a;
            cout << "Subscriber" << subs[x] << "is" << state[a] << endl << endl;
        }
    }
</code>```

Right here, I also have an error in line states[i] = a

Now, what I tried to do there was to randomize a number, and then let it get assigned to any subscriber, and then showed to the person who runs the program. But, well... This is not exactly what the question told me to do. And, I am not sure what I can do, here. I also have limited time for this, with only 12 hours left to do this, because I am a lazy bum. Help please?

答:
Clear version of your code:

```<code>#include <iostream>
#include <cstdlib>
#include <ctime>

using namespace std;

int main(void) {
    int subs[] = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
    size_t len = sizeof(subs) / sizeof(subs[0]);
    string subsStatus[10];
    string state[] = {"CALLING", "WAITING", "FREE", "TALKING"};

    srand(time(NULL));

    for (int i = 0; i < len; i++) {
        subsStatus[i] = state[rand() % 4]; // example: Subscriber4 = "TALKING"[3]
        cout << "Subscriber" << subs[i] << " is " << subsStatus[i] << endl;
    }

    return 0;
}
</code>```

There are some guidelines as side tip:

You don't need to use nullptr in srand(time())

If I'm right, then the function main() is only supposed to accept int argc, char *argv[] and few more arguments, don't define your owns since you're not asking before launch of program from terminal.

states[i] = a defines states[i] to a not vice versa.

You don't need to define array length in case you're defining via coding, i.e. int arr[] = {...}, it'll be expanded automatically, you must use c++11 and above for this feature.

Body:
Now, the question is :

Assemble a program that will simulate the work of automatic telephone exchanges. For example, there are 10 subscribers, anyone can call anyone, Each has several conditions:
waiting for an answer, calls, says, free. They randomly call each other, the program should show the operation of this system.

And, I figured out how to do some of it, but, don't know how to exactly implement it.

    #include <cstdlib>
    #include <chrono>
    #include <random>
    #include <string>
    using namespace std;

    int i, a;
    string state[4]{ "free", "waiting", "calling", "talking" };
    int states[4]{ 1,2,3,4 };
    int subs[10]{ 1,2,3,4,5,6,7,8,9,10 };

    int main(int subs[10], int states[4], string state[4])
    {
        srand(time(nullptr));
        for (int x = 0; x < subs[10]; x++)
        {
            states[i] = rand() % 4;
            states[i] = a;
            cout << "Subscriber" << subs[x] << "is" << state[a] << endl << endl;
        }
    }

Right here, I also have an error in line states[i] = a

Now, what I tried to do there was to randomize a number, and then let it get assigned to any subscriber, and then showed to the person who runs the program. But, well... This is not exactly what the question told me to do. And, I am not sure what I can do, here. I also have limited time for this, with only 12 hours left to do this, because I am a lazy bum. Help please?

Body:
Clear version of your code:

#include <iostream>
#include <cstdlib>
#include <ctime>

using namespace std;

int main(void) {
    int subs[] = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
    size_t len = sizeof(subs) / sizeof(subs[0]);
    string subsStatus[10];
    string state[] = {"CALLING", "WAITING", "FREE", "TALKING"};

    srand(time(NULL));

    for (int i = 0; i < len; i++) {
        subsStatus[i] = state[rand() % 4]; // example: Subscriber4 = "TALKING"[3]
        cout << "Subscriber" << subs[i] << " is " << subsStatus[i] << endl;
    }

    return 0;
}

There are some guidelines as side tip:

You don't need to use nullptr in srand(time())

If I'm right, then the function main() is only supposed to accept int argc, char *argv[] and few more arguments, don't define your owns since you're not asking before launch of program from terminal.

states[i] = a defines states[i] to a not vice versa.

You don't need to define array length in case you're defining via coding, i.e. int arr[] = {...}, it'll be expanded automatically, you must use c++11 and above for this feature.


问:
querySelector works but querySelectorAll doesn't
I'm very new to JS.
There are 3 svgs, and I'm trying to change the fill color when the mouse is over.
When I use querySelector('.svg'), the first one works perfectly.
I'd like to change all three of them, not only the first one,
but none of querySelectorAll('.svg'), or getElementsbyClassName, getElementsbyTagName seem to work. What is the problem?
Any help would be appreciated.
Thank you.

const icon = document.querySelectorAll(".svg");

icon.addEventListener("mouseover", function () {
  icon.style.color = "#ED4264";
});

icon.addEventListener("mouseout", function () {
  icon.style.color = "black";
});```
<pre class="snippet-code-html lang-html prettyprint-override"><code><footer>
      <div class="prev">
        <svg
          class="svg"
          width="22"
          height="21"
          viewBox="0 0 22 21"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M10.3376 20.7849L0.183247 10.5454L10.3376 0.305979L13.1778 3.12258L7.80002 8.54544L21.9751 8.54544V12.5454L7.80002 12.5454L13.1778 17.9683L10.3376 20.7849Z"
            fill="currentcolor"
          />
        </svg>
      </div>

      <div class="random">
        <svg
          class="svg"
          width="27"
          height="24"
          viewBox="0 0 27 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0 0L3.57143 3.57143L7.7486e-05 7.14286"
            transform="translate(20.5713 2)"
            stroke="currentcolor"
            stroke-width="3"
          />
          <path
            d="M0 0L3.57143 3.57143L7.7486e-05 7.14286"
            transform="translate(20.5713 14.8572)"
            stroke="currentcolor"
            stroke-width="3"
          />
          <path
            d="M0 12.3214C5.03247 12.3214 10.0649 9.91071 11.5747 6.16059C13.0844 2.41047 17.1104 7.37802e-05 22.1429 0"
            transform="translate(0.571289 18.4285) scale(1 -1)"
            stroke="currentcolor"
            stroke-width="4"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M22.1431 4C19.2583 4 16.9155 4.88867 15.3193 6.28589C14.4653 5.53833 13.8252 4.64478 13.4302 3.66406C13.3286 3.41235 13.2163 3.16724 13.0933 2.92822C15.4746 1.03613 18.6689 0 22.1431 0V4ZM13.0933 9.64331C11.9321 8.7207 10.9639 7.59473 10.251 6.28589C10.0537 6.64795 9.87598 7.02393 9.71924 7.41357C9.68506 7.49829 9.64844 7.58276 9.6084 7.66675C10.7573 8.46265 11.7734 9.43262 12.5425 10.5715C12.7437 10.2737 12.9277 9.96436 13.0933 9.64331ZM9.6084 13.4763C9.09961 12.4043 8.12012 11.3911 6.73145 10.5715C6.55762 10.6741 6.37744 10.7737 6.19092 10.8701C4.41309 11.7878 2.21338 12.3215 0 12.3215V16.3215C2.81885 16.3215 5.65186 15.6497 8.02588 14.4246C8.57275 14.1423 9.10352 13.8262 9.6084 13.4763Z"
            transform="translate(0.571289 3.57129)"
            fill="currentcolor"
          />
        </svg>
      </div>

      <div class="next">
        <svg
          class="svg"
          width="23"
          height="21"
          viewBox="0 0 23 21"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12.2088 0.0202637L22.3631 10.2597L12.2088 20.4992L9.36858 17.6826L14.7464 12.2597H0.571289V8.25973H14.7464L9.36858 2.83686L12.2088 0.0202637Z"
            fill="currentcolor"
          />
        </svg>
      </div>
    </footer></code>```

答:
The following returns a NodeList of elements.

```<code>const icon = document.querySelectorAll(".svg");
</code>```

You can't use addEventListener on a node list, but you can do this:

```<code>icon.forEach(function(elem) {
  elem.addEventListener(...);
});
</code>```

This should attach an event listener to each element of your original query.

Body:
I'm very new to JS.
There are 3 svgs, and I'm trying to change the fill color when the mouse is over.
When I use querySelector('.svg'), the first one works perfectly.
I'd like to change all three of them, not only the first one,
but none of querySelectorAll('.svg'), or getElementsbyClassName, getElementsbyTagName seem to work. What is the problem?
Any help would be appreciated.
Thank you.

const icon = document.querySelectorAll(".svg");

icon.addEventListener("mouseover", function () {
  icon.style.color = "#ED4264";
});

icon.addEventListener("mouseout", function () {
  icon.style.color = "black";
});

        <svg
          class="svg"
          width="22"
          height="21"
          viewBox="0 0 22 21"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M10.3376 20.7849L0.183247 10.5454L10.3376 0.305979L13.1778 3.12258L7.80002 8.54544L21.9751 8.54544V12.5454L7.80002 12.5454L13.1778 17.9683L10.3376 20.7849Z"
            fill="currentcolor"
          />
        </svg>

        <svg
          class="svg"
          width="27"
          height="24"
          viewBox="0 0 27 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0 0L3.57143 3.57143L7.7486e-05 7.14286"
            transform="translate(20.5713 2)"
            stroke="currentcolor"
            stroke-width="3"
          />
          <path
            d="M0 0L3.57143 3.57143L7.7486e-05 7.14286"
            transform="translate(20.5713 14.8572)"
            stroke="currentcolor"
            stroke-width="3"
          />
          <path
            d="M0 12.3214C5.03247 12.3214 10.0649 9.91071 11.5747 6.16059C13.0844 2.41047 17.1104 7.37802e-05 22.1429 0"
            transform="translate(0.571289 18.4285) scale(1 -1)"
            stroke="currentcolor"
            stroke-width="4"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M22.1431 4C19.2583 4 16.9155 4.88867 15.3193 6.28589C14.4653 5.53833 13.8252 4.64478 13.4302 3.66406C13.3286 3.41235 13.2163 3.16724 13.0933 2.92822C15.4746 1.03613 18.6689 0 22.1431 0V4ZM13.0933 9.64331C11.9321 8.7207 10.9639 7.59473 10.251 6.28589C10.0537 6.64795 9.87598 7.02393 9.71924 7.41357C9.68506 7.49829 9.64844 7.58276 9.6084 7.66675C10.7573 8.46265 11.7734 9.43262 12.5425 10.5715C12.7437 10.2737 12.9277 9.96436 13.0933 9.64331ZM9.6084 13.4763C9.09961 12.4043 8.12012 11.3911 6.73145 10.5715C6.55762 10.6741 6.37744 10.7737 6.19092 10.8701C4.41309 11.7878 2.21338 12.3215 0 12.3215V16.3215C2.81885 16.3215 5.65186 15.6497 8.02588 14.4246C8.57275 14.1423 9.10352 13.8262 9.6084 13.4763Z"
            transform="translate(0.571289 3.57129)"
            fill="currentcolor"
          />
        </svg>

        <svg
          class="svg"
          width="23"
          height="21"
          viewBox="0 0 23 21"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12.2088 0.0202637L22.3631 10.2597L12.2088 20.4992L9.36858 17.6826L14.7464 12.2597H0.571289V8.25973H14.7464L9.36858 2.83686L12.2088 0.0202637Z"
            fill="currentcolor"
          />
        </svg>

Body:
The following returns a NodeList of elements.

const icon = document.querySelectorAll(".svg");

You can't use addEventListener on a node list, but you can do this:

icon.forEach(function(elem) {
  elem.addEventListener(...);
});

This should attach an event listener to each element of your original query.


问:
How can I check if the array of objects have all values duplicate?
```<code>var values = [
    { name: 'Car',Data:'Required',value:'Vehicle' },
    { name: 'Auto',Data:'Required',value:'Vehicle'},
    { name: 'Bike',Data:'Required',value:'Vehicle'},
    { name: 'Car',Data:'Required',value:'Vehicle' }
];
</code>```

Duplicate object will be:
                               { name: 'Car',Data:'Required',value:'Vehicle' }

答:
You can check if an array contains the same item on a different index and by that, understand that there is a duplicate:

const values = [
    { name: 'Car',Data:'Required',value:'Vehicle' },
    { name: 'Auto',Data:'Required',value:'Vehicle'},
    { name: 'Bike',Data:'Required',value:'Vehicle'},
    { name: 'Car',Data:'Required',value:'Vehicle' }
];

const duplicates = values.filter((item, idx) => values.findIndex(i => item.name === i.name && item.Data === i.Data && item.value === i.value) !== idx);

console.log(duplicates);```

Body:
var values = [
    { name: 'Car',Data:'Required',value:'Vehicle' },
    { name: 'Auto',Data:'Required',value:'Vehicle'},
    { name: 'Bike',Data:'Required',value:'Vehicle'},
    { name: 'Car',Data:'Required',value:'Vehicle' }
];

Duplicate object will be:
                               { name: 'Car',Data:'Required',value:'Vehicle' }


问:
Logic Apps subfolder triggers
I am trying to create a logic app which should copy a file from Box storage to azure blob storage whenever files get updated. I have 4 vendors which will place the files into 4 different folders.

Could you please help me to design a solution for this scenario, As I tried I could create a single trigger for single folder. I am not sure how to create 4 triggers to 4 different files.

答:
For this requirement, azure logic app doesn't support trigger by multiple folders in one flow. We can just choose one folder in the trigger and when the files in this folder be modified, the flow will be triggered. Even if you choose the parent folder of the four folders in the trigger, it will not be triggered when the files in subfolder be modified.

As a workaround, we just need create 4 same logic apps with different folders set in the trigger. The logic app is billed by the count of logic app runs triggers, action and connector, so creating four logic apps will just lead to creation headaches but the cost will not increase.

Title: Logic Apps subfolder triggers


问:
CSS dropdown menu disappears when using bootstrap carousel
I have a dropdown nav menu (using css from w3schools) that works fine until a carousel is put immediately after. Then the dropdown no longer shows and I do not know why.
I am new to css html .., so I don't find the solution to my problem. I have changed the Z-index and position on multiple classes and it doesn't solve the issue. Whenever i delete the bootstrap css link then the dropdown menu works again.
Do you have any suggestions?
thanks!

ps: i put all the code, sorry if i added more than the required, its my first time posting

/* CSS Document */

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.background-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), url("../img/header.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
}

.header-text {
  text-align: center;
  color: white;
  padding: 30px;
}

/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */

.topnav a:hover {
  background-color: #1C8CE8;
  text-decoration: none;
  color: black;
}

/* Add an active class to highlight the current page */

.activenav {
  background-color: #4F47E1;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */

.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Style the links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}

.carousel {
  max-width: 100% !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.carousel-inner>.item>img {
  height: 600px!important;
  width: 100%;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

  <nav class="topnav" id="myTopnav">
    Home
    <div class="dropdown">
      <button class="dropbtn">Products
            <i class="fa fa-caret-down"></i>
        </button>
      <div class="dropdown-content">
        Make
        Model
        Year
      </div>
    </div>
    News
    About
    Contact us
    <i class="fa fa-bars"></i>
  </nav>
  <section id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="img/img1slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

      <div class="item">
        <img src="img/img2slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

      <div class="item">
        <img src="img/img3slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

    </div></code>```

答:
Problem with css property overflow in the menu wrap. Use my below's code,
 hope it helps

```<code>.dropdown {overflow: initial;}
.topnav {
   overflow: visible;
   width: 100%;
   height: 53px;
}
</code>```

Body:
I have a dropdown nav menu (using css from w3schools) that works fine until a carousel is put immediately after. Then the dropdown no longer shows and I do not know why.
I am new to css html .., so I don't find the solution to my problem. I have changed the Z-index and position on multiple classes and it doesn't solve the issue. Whenever i delete the bootstrap css link then the dropdown menu works again.
Do you have any suggestions?
thanks!

ps: i put all the code, sorry if i added more than the required, its my first time posting

/* CSS Document */

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.background-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), url("../img/header.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
}

.header-text {
  text-align: center;
  color: white;
  padding: 30px;
}

/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */

.topnav a:hover {
  background-color: #1C8CE8;
  text-decoration: none;
  color: black;
}

/* Add an active class to highlight the current page */

.activenav {
  background-color: #4F47E1;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */

.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Style the links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}

.carousel {
  max-width: 100% !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.carousel-inner>.item>img {
  height: 600px!important;
  width: 100%;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    Home

      <button class="dropbtn">Products

        </button>

        Make
        Model
        Year

    News
    About
    Contact us

title

paragraph

title

paragraph

title

paragraph

Body:
Problem with css property overflow in the menu wrap. Use my below's code,
 hope it helps

.dropdown {overflow: initial;}
.topnav {
   overflow: visible;
   width: 100%;
   height: 53px;
}