Reactivity

We can run functions when an event happens
- In this case, we will add the p tag when the button is clicked

%%html
<!-- the ID must be specified on the elements -->
<button id="myButton">Click here!</button>

<div id="myContainer">
    <h1 id="myTitle">My Title</h1>
</div>

<!-- our javascript goe here -->
<script>
    // create a function => takes in text, returns created p
    function createPTag(text) {
        // creates a new element
        var pElement = document.createElement("p")

        // using the parameter like a variable
        pElement.innerHTML = text

        return pElement;
    }

    // create a function that sets specific text and adds to div
    function addCoolPTag() {
        // using our new function
        var pTag = createPTag("cooler text")

        // place the p element in the webpage
        var div = document.getElementById("myContainer")

        // add p tag to the div
        div.appendChild(pTag)
    }

    // add the P tag when our button is clicked
    var myButton = document.getElementById("myButton")

    // using the onclick variable of the button
    // functions can be used as values for these variables
    myButton.onclick = addCoolPTag
</script>

My Title

Hacks

Copy your HTML code from the HTML hacks. Write a Javascript snippet to switch the links of the two a tags when a button is pressed. Once they are switched, change the inner HTML of the top p tag to the word “switched!”

%%html
<style>
  /* Add CSS to style the button */
  #myButton {
    background-color: #333333;
    color: #00FF00;
    border-radius: 25px;
    padding: 15px 30px;
    transition: all 0.2s ease; /* Add transition for smooth size change */
  }
</style>

<div>
  <p id="message">Click the button below to switch the links and change the button color!</p>
  <button id="myButton">Switch Button</button>
</div>

<div>
  <a href="https://www.youtube.com/watch?v=b65MoVwANq4&t=423s&ab_channel=HeyBearSensory" id="firstLink">Video 1</a>
  <a href="https://www.youtube.com/watch?v=qwIjjcXg868&ab_channel=romder" id="secondLink">Video 2</a>
  <p>One is a Batman video, the other is of dancing fruit.</p>
</div>

<script>
  let fontSize = 24; // Initial font size
  let padding = 15; // Initial padding size

  function buttonClick() {
      var firstLinkElement = document.getElementById('firstLink');
      var secondLinkElement = document.getElementById('secondLink');
      var messageElement = document.getElementById('message');
      var buttonElement = document.getElementById('myButton');

      var firstLinkHref = firstLinkElement.href;
      var secondLinkHref = secondLinkElement.href;

      firstLinkElement.href = secondLinkHref;
      secondLinkElement.href = firstLinkHref;

      // Change the button color randomly
      var colors = ["#FF5733", "#33FF57", "#5733FF", "#FFFF33", "#33FFFF"];
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      buttonElement.style.backgroundColor = randomColor;

      // Increase font size and padding on each click
      fontSize += 2;
      padding += 5;

      // Apply the updated font size and padding
      buttonElement.style.fontSize = fontSize + 'px';
      buttonElement.style.padding = padding + 'px';

      messageElement.innerHTML = 'Switched!';
  }

  var buttonElement = document.getElementById('myButton');
  buttonElement.addEventListener('click', buttonClick);
</script>

Click the button below to switch the links and change the button color!

Video 1 Video 2

One is a Batman video, the other is of dancing fruit.

Using Javascript with HTML DOM • 7 min read

Description

Reactivity

My Title

Hacks