主页 / 问题 / 1230311
Accepted
Leonel
Asked:2022-01-12 20:43:10 +0000 UTC2022-01-12 20:43:10 +0000 UTC

在 JS 按钮上添加元素

  • 772

我想知道如何通过按钮和元素ID添加它

var btns = document.getElementsByClassName('intro__btn');
    var Range = document.getElementById('myRange');
var par = document.getElementsByClassName('main');
btns[0].onclick = function() {
  par[0].classList.add('#Range');
  par[0].classList.add("control");
}
btns[1].onclick = function() {
  par[0].classList.remove('#Range');
  par[0].classList.remove("control");
}
javascript

1 个回答

  1. Best Answer

    像这样的东西？它就像聊天一样，如果您澄清了点击时需要添加的确切内容，我会编辑我的答案

    // Ищем элементы
const output = document.querySelector('.output');
const button = document.querySelector('.btn');
const input  = document.querySelector('.text');

function send() {
  if(input.value === "") return; // Выходим из функции, если отправлять нечего

  let newMessage = document.createElement('div'); // Создаём новый <div>. На странице его ещё нет
  newMessage.classList.add('color'); // Присваиваем ему класс сообщения
  newMessage.textContent = input.value; // Вставляем туда текст
                                        // Не innerHTML, так как через него можно вставить скрипты
  output.appendChild(newMessage); // Добавляем сообщение в HTML
  input.value = ""
}

button.addEventListener('click', send); // Так лучше добавлять события
    *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.content{
  width:230px;
  height:200px;
  background-color:#abc;
  position:relative;
}
.flex{
  position:absolute;
  bottom:0px;
  display:flex;
  justify-content:flex-end;
  width:100%;
}
.output{
  width:100%;
  height:90%;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-direction: column;
}
.color{
  background-color:blue;
  border-radius:5px;
  color:white;
  padding:10px;
}
    <div class = "content">
      <div class = "output"></div>
      <div class = "flex"><input type = "text" class = "text"><button class = "btn">SEND</button></div>
    </div>

    • 1

相关问题