Highlights of JavaScript — Field Values, Images, and Text

To learn JavaScript, we must learn the basics.

In this article, we’ll look at the most basic parts of the JavaScript language.

Setting Field Values

We can set input field values by using JavaScript.

For example, we can write the following HTML:

<form>
  fruit:<br>
  <input type="text" id="fruit" onBlur="fillColor();"><br>
  color:<br>
  <input type="text" id="color">
</form>

Then we can write the following JavaScript code:

const fillColor = () => {
  let color;
  const {
    value
  } = document.getElementById("fruit");
  switch (value) {
    case "apple":
      color = "red";
      break;
    case "orange":
      color = "orange";
      break;
    case "grape":
      color = "purple";
  }
  document.getElementById("color").value = color;
}

We added the onBlur attribute to the first input box.

So when we move the cursor away from the first input, the fillColor function is called.

Them we get the value if the input with ID fruit ‘s value with the value property.

Then we set the color variable’s value with according to the value of value .

We then set the input with ID color ‘s value with the value of the color variable.

Reading and Setting Paragraph Text

We can read and set paragraph text.

For example, we can write the following HTML:

<p id="text">
  Lorem ipsum dolor sit amet.
  <a href="javascript:void(0);" onClick="expandText();">
    <em>Click for more.</em>
  </a>
</p>

Then we can add the expandText function as follows:

const expandText = () => {
  const expandedParagraph = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lorem eget erat vestibulum consectetur. Donec vehicula porta est ut vestibulum. Mauris et nisl a sem iaculis laoreet. Nunc eleifend facilisis massa ut luctus. Nullam sollicitudin non lorem non eleifend. Curabitur elementum felis quis enim malesuada varius.`;
  document.getElementById("text").innerHTML = expandedParagraph;
}

The a element has the onClick attribute that is set to the expandText() expression.

So when we click on the ‘Click for more’ text, we’ll see the expanded text displayed on the screen.

This is because we set the expandedParagraph variable’s value as the value of the innerHTML property of the element with ID text .

We can insert anything into an element by setting the innerHTML property.

For example, we can keep the existing HTML and change the JavaScript to:

const expandText = () => {
  const expandedParagraph = `
    <ol>
      <li>Slow</li>
      <li>Fast</li>
      <li>Just-right</li>
     </ol>
   `;
  document.getElementById("text").innerHTML = expandedParagraph;
}

We set the content of the element with ID text to an ordered list.

So that’s what we’ll see when we click on Click for more.

Manipulating Images and Text

We can manipulate images with JavaScript.

For example, we can write the following HTML:

<img src="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo" id="image" onClick="makeInvisible();">

Then we can add the following CSS:

.hidden {
  visibility: hidden;
}

Then the makeInvisible function is:

const makeInvisible = () => {
  document.getElementById("image").className = "hidden";
}

The hidden class has the visibility property set to hidden .

Therefore, when we click on the image, the makeInvisible function is run.

Then the hidden class is added to the img element.

So the image will be hidden.

Conclusion

We can use JavaScript to set field values, manipulate images, and paragraph text.