Нажатие кнопки и получение ввода от пользователя - PullRequest
Новая
       0

Нажатие кнопки и получение ввода от пользователя

0 голосов
/ 09 мая 2020

ThePicture

Вот изображение. Я сделал css и html самостоятельно и теперь не знаю, как добавить сюда javascript. Я хочу:

  1. пользователь что-то пишет
  2. , затем он нажимает кнопку (например, в верхнем регистре), и его текст появляется внизу, вместо слов "Вот будет ты текст". Как мне добавить такую ​​функцию? Я запуталась.

Ответы [ 4 ]

1 голос
/ 09 мая 2020

Если вы хотите его в чистом виде Javascript, вы можете ввести код из фрагмента.

Я предполагаю, что вы знаете HTML и CSS, конец объясняет только код javascript .

Идея такова:

  1. Вы подключаете прослушиватель событий для обработки нажатия пользователем каждой кнопки. Каждая кнопка имеет собственное имя класса, вы можете использовать его как параметр document.getElementsByClassName, чтобы получить массив объектов с этим именем класса. Затем вы прикрепляете обработчик событий, вы можете сделать это с помощью addEventListener.

  2. Внутри функции события щелчка вы помещаете действие, которое будет запускаться после любого щелчка по кнопке.

В приведенном ниже фрагменте есть комментарии код, чтобы очистить вещи. 

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

addEventListener

toUpperCase

toLowerCase

0 голосов
/ 09 мая 2020 

const nameNode = document.getElementById("Name");
const nameCopyNode = document.getElementById("NameCopy");
if(nameNode){
  nameNode.addEventListener('input',function(){
    if(nameCopyNode){
      nameCopyNode.value = this.value
    }
  })
}
<input type = "text" placeholder = "type your name" id="Name"/>
<br>
<br>
<input type = "text" placeholder = "you are typing" disabled id="NameCopy"/>
0 голосов
/ 09 мая 2020

Можно использовать комбинацию onclick , toUpperCase и toLowerCase для получения требуемого результата.

Вот рабочий пример: 

<!DOCTYPE html>
<html>

<body>
  <h2>Write something</h2>
  <input id="inputText" type="text" placeholder="write something" style="width: 300px;">
  <br>
  <button onclick="upperCaseButtonClicked()">Upper case</button>
  <button onclick="lowerCaseButtonClicked()">Lower case</button>
  <button onclick="doNothingButtonClicked()">Do nothing</button>
  <br>
  <textarea id="outputArea" rows="5" cols="35"></textarea>
  <script>
    function upperCaseButtonClicked() {
      var input = document.getElementById("inputText").value
      var output = input.toUpperCase()
      document.getElementById("outputArea").innerHTML = input.toUpperCase()
    }

    function lowerCaseButtonClicked() {
      var input = document.getElementById("inputText").value
      var output = input.toUpperCase()
      document.getElementById("outputArea").innerHTML = input.toLowerCase()
    }

    function doNothingButtonClicked() {
      var input = document.getElementById("inputText").value
      document.getElementById("outputArea").innerHTML = input
    }
  </script>
</body>

</html>
0 голосов
/ 09 мая 2020

В простейшей форме, используя jQuery: 

$(document).ready(function() {
    $('#uppercase-btn').click(function() {
        $('#myoutput').val($("#textid").val().toUpperCase());
    });

    $('#lowercase-btn').click(function() {
        $('#myoutput').val($("#textid").val().toLowerCase());
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="myinput" id="textid" /> 
<button id="uppercase-btn">Uppercase</button> 
<button id="lowercase-btn">lowercase</button>
<textarea id="myoutput" disabled></textarea>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...