JavaScript in-line logic

JavaScript is a powerful programming language that can be used to create dynamic and responsive websites. One of the key features of JavaScript is its ability to manipulate and interact with HTML documents. In-line logic is a powerful way to incorporate JavaScript directly into your HTML code to create dynamic and responsive web pages.

What is in-line logic?

In-line logic refers to the use of JavaScript within HTML code. This allows for the dynamic modification of HTML elements and the creation of more interactive web pages. In-line logic is especially useful for small scripts as it eliminates the need for a separate JavaScript file.

Syntax

In-line JavaScript is added to HTML elements using the on attribute. The on attribute is followed by an event that triggers the JavaScript code. Here is the basic syntax:

<element onevent="JavaScript">

For example, if we want to add a click event to a button, we can use the following HTML code:

<button onclick="alert('Hello World!')">Click me</button>

In this example, the onclick event triggers a JavaScript function that displays an alert box.

Example: Changing Text

In-line logic can be used to change the contents of an HTML element. For example, we can use in-line logic to create a button that changes the text of a paragraph:

<p id="my-paragraph">Hello World!</p>
<button onclick="document.getElementById('my-paragraph').innerHTML = 'Goodbye World!'">Change Text</button>

In this example, the onclick event triggers a JavaScript function that changes the contents of the my-paragraph element to "Goodbye World!".

Example: Toggling Visibility

In-line logic can also be used to toggle the visibility of an element. For example, we can create a button that hides or shows an image:

<img id="my-image" src="example.jpg" style="display: none;">
<button onclick="toggleImage()">Show/Hide Image</button>

<script>
  function toggleImage() {
    var img = document.getElementById('my-image');
    if (img.style.display === 'none') {
      img.style.display = 'block';
    } else {
      img.style.display = 'none';
    }
  }
</script>

In this example, the toggleImage() function is triggered by the onclick event and toggles the visibility of the my-image element.

Conclusion

In-line logic is a powerful way to create dynamic and interactive web pages using JavaScript within HTML code. By using in-line logic, we can create small, responsive scripts that enhance the user experience.