1. Links & Images

// Change Link Destination
document.getElementById("link").href 
    = "https://google.com";

// Swap Image Source
document.getElementById("img").src 
    = "img2.jpg";

What is this?

This demonstrates Attribute Manipulation. You can programmatically redirect users or update graphics without a page refresh.

2. Lists (Dynamic Content)

<ul id="list">
  <li>Item 1</li>
</ul>

<script>
  document.getElementById("list").innerHTML 
      += "<li>Item 2</li>";
</script>

What is this?

Using innerHTML with the += operator allows you to append new HTML tags. This is how "Add to List" features are built.

3. Buttons & Functions

<button onclick="hello()">Click</button>

<script>
  function hello(){
    alert("Hello from Point Pikker!");
  }
</script>

What is this?

Functions allow you to group code. By linking a function to a button's onclick event, you control exactly when that logic runs.

4. Form Submissions

<form onsubmit="submitForm()">
  <input type="text">
  <button>Submit</button>
</form>

<script>
  function submitForm(){
    alert("Form data sent!");
  }
</script>

What is this?

The onsubmit event is specific to forms. It captures the moment a user finishes entering data, allowing you to validate it before it leaves the page.

5. Getting Input Values

<input id="userName">

<script>
  function getName(){
    let val = document.getElementById("userName").value;
    alert("Hello, " + val);
  }
</script>

What is this?

The .value property is unique to inputs. It allows JavaScript to "read" what the user has typed, which is the foundation of search bars and user profiles.