Category: JavaScript

Categories
JavaScript Answers

How to stop propagation of mousedown or mouseup from a click handler with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to stop propagation of mousedown or mouseup from a click handler with JavaScript.

In this article, we’ll look at how to stop propagation of mousedown or mouseup from a click handler with JavaScript.

How to stop propagation of mousedown or mouseup from a click handler with JavaScript?

To stop propagation of mousedown or mouseup from a click handler with JavaScript, we can call stopPropagation.

For instance, we write:

<div id="outer">
  <div id="inner">
    hello world
  </div>
</div>

to add a inner div.

Then we write:

const inner = document.getElementById('inner')
inner.onmouseup = (e) => {
  e.stopPropagation()
}
inner.onmousedown = (e) => {
  e.stopPropagation()
}

to select the inner div with getElementById.

Then we set the onmouseup and onmousedown properties to a function that calls stopPropagation to stop propagation of the mouseup and mousedown events triggered by the div.

Conclusion

To stop propagation of mousedown or mouseup from a click handler with JavaScript, we can call stopPropagation.

Categories
JavaScript Answers

How to fix setting innerHTML not updating the DOM with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to fix setting innerHTML not updating the DOM with JavaScript.

In this article, we’ll look at how to fix setting innerHTML not updating the DOM with JavaScript.

How to fix setting innerHTML not updating the DOM with JavaScript?

To fix setting innerHTML not updating the DOM with JavaScript, we should set the innerHTML property of the element to an HTML string.

For instance, we write:

<div>

</div>

to add a div.

Then we write:

const div = document.querySelector('div')
div.innerHTML = '<b>foo</b>'

to select the div with querySelector.

Then we set div.innerHTML to a string with the elements we want to put in the div.

Conclusion

To fix setting innerHTML not updating the DOM with JavaScript, we should set the innerHTML property of the element to an HTML string.

Categories
JavaScript Answers Vue Vue Answers

How to submit form in Vue.js with Ajax and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to submit form in Vue.js with Ajax and JavaScript.

In this article, we’ll look at how to submit form in Vue.js with Ajax and JavaScript.

How to submit form in Vue.js with Ajax and JavaScript?

To submit form in Vue.js with Ajax and JavaScript, we can create a FormData instance from the form values.

For instance, we write

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div>
      <form @submit.prevent='submit'>
        <input name='title'>
        <input name='content'>
        <input type='submit'>
      </form>
    </div>
  `,
  methods: {
    async submit(e) {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: new FormData(e.target),
      })
    }
  }
})

to add a form.

We set the @submit.prevent directive to submit run submit when we click Submit.

In submit, we create a FormData instance by passing e.target into it, where e.target is the form element.

As a result, when we click Submit, the form values with the name attribute values as the keys and the input values as their corresponding values will be submitted.

Conclusion

To submit form in Vue.js with Ajax and JavaScript, we can create a FormData instance from the form values.

Categories
JavaScript Answers

How to get elements from a HTMLCollection with JavaScript?

white and brown long coated small dog

Sometimes, we want to get elements from a HTMLCollection with JavaScript.

In this article, we’ll look at how to get elements from a HTMLCollection with JavaScript.

How to get elements from a HTMLCollection with JavaScript?

To get elements from a HTMLCollection with JavaScript, we can access them by their index.

For instance, we write:

<div class='review'>

</div>
<div class='review'>

</div>

to add elements with a class.

Then we write:

const els = document.getElementsByClassName('review');
console.log(els[0])

to call getElementsByClassName with 'review' to select elements with class review.

Then we can get the first one in the collection with els[0].

Conclusion

To get elements from a HTMLCollection with JavaScript, we can access them by their index.

Categories
JavaScript Answers Nodejs

How to fix ‘Error: Failed to lookup view “error” in views directory’ with Node.js and Express?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to fix ‘Error: Failed to lookup view "error" in views directory’ with Node.js and Express.

In this article, we’ll look at how to fix ‘Error: Failed to lookup view "error" in views directory’ with Node.js and Express.

For instance, we write:

const express = require('express')
const app = express()
const port = 3000

app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

to set the location of the view files with

app.set('views', path.join(__dirname, 'views'));

We may also set the static asset folder location with

app.use(express.static(path.join(__dirname, 'public')));

And we set the template engine to render the views with

app.engine('html', require('ejs').renderFile);

Conclusion

To fix ‘Error: Failed to lookup view "error" in views directory’ with Node.js and Express, we should set 'views' setting to the folder with the views.