Сочетание клавиш и нажатия - PullRequest
Новая
       5

Сочетание клавиш и нажатия

0 голосов
/ 03 ноября 2018

Есть посты, где это упоминается, но в J Query, которые я еще не изучил. Я пытался добавить элемент, когда пользователь нажимает на экран или клавиатуру. Когда пользователь нажимает на экран, кажется, что он работает отлично, но затем, когда пользователь нажимает клавишу ввода на клавиатуре, элементы отображаются менее миллисекунды, а затем исчезают. Кроме того, если вы можете указать, как добавить функцию удаления, чтобы удалить элемент, на который нажимает пользователь. Вот HTML-код: 

<!DOCTYPE html>
<html>
<head>
    <title>Simple Shopping Cart</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p class="buy">Buy your items anywhere and anytime</p>
    <p class="click">click on an item to remove it</p>
    <form>
        <input type="text" class="item" placeholder="Item:">
        <button type="button">Add item</button>
    </form>
    <br>
    <ul>

    </ul>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

и вот код JavaScript: 

const input = document.querySelector(".item");
const btn = document.querySelector("button");
const ul = document.querySelector("ul");

function inputLength() {
    return input.value.length;
}
function add() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
}
function addItem() {
    if (inputLength() > 0) {
        add();
    }
}
function addItemPress(event) {
    if (inputLength() > 0 && event.which === 13) {
        add();
    }
}
btn.addEventListener("click", addItem);
input.addEventListener("keypress", addItemPress)

1 Ответ

0 голосов
/ 03 ноября 2018

По умолчанию формы будут сбрасывать страницу при отправке, если вы не установили для свойства action значение "#". Чтобы запустить JavaScript при отправке формы, вы можете использовать свойство onSubmit. Эти подходы можно объединить так:

index.html: 

<!DOCTYPE html>
<html>
<head>
    <title>Simple Shopping Cart</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p class="buy">Buy your items anywhere and anytime</p>
    <p class="click">click on an item to remove it</p>
    <form id="addItemForm" action="#" onsubmit="add()">
        <input type="text" class="item" placeholder="Item:">
        <button type="submit">Add item</button>
    </form>
    <br>
    <ul>

    </ul>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js: 

const input = document.querySelector(".item");
const btn = document.querySelector("button");
const ul = document.querySelector("ul");
const form = document.getElementById("addItemForm");

function add() {
    if (input.value.length > 0) {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(input.value));
        ul.appendChild(li);
        form.reset();
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...