mh108
11/20/2018 - 11:51 PM

Two Input Boxes & Two Buttons

Web app with multiple textboxes and multiple buttons

two-inputs.css
content_copyfile_download
img {
  width: 150px;
  align: left;
  vertical-align: middle;
  border: thin solid;
  padding: 2px;
  margin: 5px;
}

h2 {
  color: #0000e6;
}

input {
  background-color: ghostwhite;
  padding: 3px;
  font-size: larger;
}

button {
  font-size: larger;
  background-color: ghostwhite;
  background-color: ghostwhite;
  padding: 3px;
}
two-inputs.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="two-inputs.css">
  <title>Two Inputs</title>
</head>
<body>
<h2>Two Inputs App</h2>
Enter s1: <input id="inBox1" type="text">
Enter s2: <input id="inBox2">
<p>
  <button id="b1">Concat</button> &nbsp;
  <button id="b2">toSnakeCase</button>
</p>
<div></div>
<script src="two-inputs.js"></script>
</body>
</html>
two-inputs.js
content_copyfile_download
// jshint esversion: 6

//1. Define a dispatcher to handle all button clicks
var main = function() {
  //get values entered by the user
  let str1 = document.getElementById("inBox1").value;
  let str2 = document.getElementById("inBox2").value;

  //the "this" keyword is set to the button that was clicked
  //console.log(this.id);
  //dispatch on button id
  if (this.id == "b1") {
    console.log("b1 clicked");
    //display the concatenation of str1 and str2
    document.querySelector("div").innerHTML = str1 + str2;
  } else if (this.id == "b2") {
    console.log("b2 clicked");
    //display the concatenation of str1 and str2
    document.querySelector("div").innerHTML =
      str1.toLowerCase() + "_" + str2.toLowerCase();
  }
};

//2. Register the onclick handler for each button after the DOM is complete
window.addEventListener("load", function() {
  //select the buttons
  var buttons = document.querySelectorAll("button");

  //register the same handler for each button
  for (var i = 0; i < buttons.length; ++i) {
    buttons[i].addEventListener("click", main);
  }
});