Using Javascript with HTML DOM • 3 min read

Home

HTML

JavaScript

DOM

Data Types

HACK COMPLETE

%%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.