javascript 具有多个文本框和多个按钮的Web应用程序

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 具有多个文本框和多个按钮的Web应用程序相关的知识，希望对你有一定的参考价值。

// jshint esversion: 6

let user1 = {
  // an object
  name: "John",
  age: 30,
  "UO ID": 951007243,
  friends: ["Joan", "Jack"],
  isAdmin: false
};

let user2 = {
  // an object
  name: "Joan",
  age: 22,
  "UO ID": 951001100,
  friends: ["John", "Jill"],
  isAdmin: true
};

let user3 = {
  // an object
  name: "Jill",
  age: 22,
  "UO ID": 951011101,
  friends: ["John", "Jack"],
  isAdmin: false
};

//javascript database: array of objects
let users = [user1, user2, user3];

//Does John know someone who knows someone who knows Jack, too?
if (
  users[0].friends[0] == users[1].name &&
  users[1]["friends"][1] == users[2].name &&
  users[2].friends[1] == users[0].friends[1]
) {
  console.log("true");
} else {
  console.log("false");
}

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;
}

<!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>

// 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);
  }
});

以上是关于javascript 具有多个文本框和多个按钮的Web应用程序的主要内容，如果未能解决你的问题，请参考以下文章

Excel VBA：如何使旋转按钮控制多个文本框？

需要帮助在一个动态文本框中显示多个输入文本组件

Swift/Xcode - 无法与 ScrollView 中的 View 内的文本框和按钮进行交互

如果我有多个具有相同文本的按钮，如何检查我的 JFrame 中的哪个按钮被单击？

具有多个标签的 iOS UIButton

访问具有多个值的文本框进行查询