Category: JavaScript

Sometimes, we want to make a span element editable with JavaScript.

In this article, we’ll look at how to make a span element editable with JavaScript.

How to make a span element editable with JavaScript?

To make a span element editable with JavaScript, we can set the contentEditable property of the span to true.

For instance, we write:

<span>hello world</span>
<button>
  edit
</button>

to add a span and a button.

Then we write:

const button = document.querySelector('button')
const span = document.querySelector('span')

button.onclick = () => {
  span.contentEditable = true
}

to make the span editable when we click on the button.

To do this, we select the span and button with querySelector.

Then we set button.onclick to a function that sets span.contentEditable to true.

As a result, when we click edit, then we can change the span’s text by typing in it.

Conclusion

To make a span element editable with JavaScript, we can set the contentEditable property of the span to true.

Sometimes, we want to convert array to string while preserving brackets with JavaScript.

In this article, we’ll look at how to convert array to string while preserving brackets with JavaScript.

How to convert array to string while preserving brackets with JavaScript?

To convert array to string while preserving brackets with JavaScript, we can use the JSON.stringify method.

For instance, we write:

const a = [
  [1, 2, 3, 4, 5],
  [1, 2, 3, 4, 5],
  [1, 2, 3, 4, 5],
  [1, 2, 3, 4, 5]
];
const s = JSON.stringify(a);
console.log(s)

We call JSON.stringify with a to convert the array a to a string.

Therefore, s is '[[1,2,3,4,5],[1,2,3,4,5],[1,2,3,4,5],[1,2,3,4,5]]'.

Conclusion

To convert array to string while preserving brackets with JavaScript, we can use the JSON.stringify method.

Sometimes, we want to add a tooltip div with React and JavaScript.

In this article, we’ll look at how to add a tooltip div with React and JavaScript.

How to add a tooltip div with React and JavaScript?

To add a tooltip div with React and JavaScript, we can add event handlers for the mouseover and mouseout events.

For instance, we write:

import React from "react";

export default function App() {
  const [hover, setHover] = React.useState();
  const handleMouseIn = () => {
    setHover(true);
  };

  const handleMouseOut = () => {
    setHover(false);
  };

  const tooltipStyle = {
    display: hover ? "block" : "none"
  };

  return (
    <div>
      <div onMouseOver={handleMouseIn} onMouseOut={handleMouseOut}>
        hover
      </div>
      <div>
        <div style={tooltipStyle}>this is the tooltip!!</div>
      </div>
    </div>
  );
}

We define the hover state to keep track of when we hover over the ‘hover’ div.

Then we add the handleMouseIn and handleMouseOut functions to call setHover to true and false respwectively.

Then we add the mouseover and mouseout event handler to the div with `hover’ in it so that when we hover over it, the tooltip div will show.

We set onMouseOver to handleMouseIn and onMouseOut to handleMouseOut to add the handlers.

Next, we add the tooltip div by adding a div with the style prop set to tooltipStyle.

We set the display CSS property to 'block' if hover is true and false otherwise to show the tooltip when we hover over ‘hover’.

Conclusion

To add a tooltip div with React and JavaScript, we can add event handlers for the mouseover and mouseout events.

Sometimes, we want to split a string at last occurrence of character then join with JavaScript.

In this article, we’ll look at how to split a string at last occurrence of character then join with JavaScript.

How to split a string at last occurrence of character then join with JavaScript?

To split a string at last occurrence of character then join with JavaScript, we can use some string methods.

For instance, we write:

const k = "ext.abc.jpg";
const l = `${k.substring(0, k.lastIndexOf("."))}-fx${k.substring(k.lastIndexOf("."))}`
console.log(l);

to call the substring method to get the substring of k between the first character and the index of the last occurrence of . exclusive.

Then we call substring with the last index of . to the end of the string.

And then we combine them together in a template literal.

We used lastIndexOf to get the index of the last ..

Therefore, l is 'ext.abc-fx.jpg'.

Conclusion

To split a string at last occurrence of character then join with JavaScript, we can use some string methods.