javascript - 单击按钮并从用户那里获取输入

Question

这是一张图片。我自己完成了css和html，现在不知道如何在这里添加javascript。我想要的是：

1. 用户写东西
2. 然后他点击按钮（例如大写），他的文字出现在底部，而不是“Here will be you text”字样。如何添加这样的功能？我很困惑。

标签： javascripthtmlcss

Answer 1

如果你想用纯 Javascript 编写它，你可以在代码片段中编写代码。

我假设你知道 HTML 和 CSS，最后只解释 javascript 代码。

这个想法是：

1. 您附加一个事件侦听器来处理每个按钮中的用户点击。每个按钮都有自己的类名，您可以将其用作 document.getElementsByClassName 的参数来获取具有该类名的对象数组。接下来附加事件处理程序，您可以使用 addEventListener 执行此操作。

2. 在 click 事件函数中，您放置了在任何单击按钮后将触发的操作。

下面的代码片段已注释代码以清除内容。

//Get input field with text before any operation
var textField = document.getElementsByClassName("text-field")[0];

//Get button that will trigger the Upper Case function
var upperBtn = document.getElementsByClassName("to-upper-btn")[0];

//Get button that will trigger the Lower Case function
var lowerBtn = document.getElementsByClassName("to-lower-btn")[0];

//Get div that will show the result
var resultContainer = document.getElementsByClassName("text-result")[0];

//Attach a click event listener to the Upper Case button
upperBtn.addEventListener("click", function(){

  //Set the inner html of the result container with te value of the input field in uppercase;
  resultContainer.innerHTML  = textField.value.toUpperCase();
  
});

//Attach a click event listener to the Lower Case button
document.getElementsByClassName("to-lower-btn")[0].addEventListener("click", function(){

  //Set the inner html of the result container with te value of the input field in lowecase;
  resultContainer.innerHTML  = textField.value.toLowerCase();
  
});

.text-field {
  width:300px;
}

.container {
  margin-top:50px;
  border:1px solid #e4e4e4;
  border-radius:5px; 
  background:#000;
  color:#FFF;
  padding:10px;
}

<h1>Write something</h1>
<input type="text" class="text-field"/>
<button type="button" class="to-upper-btn">To Upper Case</button>
<button type="button" class="to-lower-btn">To Lower Case</button>

<div class="container"> 
  <div class="text-result">Just write what you want to make Upper Case or Lower Case, the result will be displayer here</div>
</div>

有关此代码中使用的 javascript 方法的更多详细信息：

getElementByClassName

添加事件监听器

转大写

转小写