Как отключить кнопку отправки после клика
В настоящее время я работаю над расширением, в котором у меня есть кнопка отправки и ввод. Когда пользователь нажимает кнопку отправки, пользователь не должен больше нажимать кнопку отправки и должен быть отключен, а если пользователь уже ввел идентификатор пользователя, он также не сможет снова нажать кнопку отправки.
Как я могу отключить кнопку отправки, когда пользователь щелкнул ее или уже щелкнул, прежде чем использовать мой код ниже?
всплывающее окно.js
function get_discord_id(callback) {
chrome.storage.sync.get(["discord_id"], (result) => {
callback(result.discord_id);
});
}
function set_discord_id(discord_id) {
chrome.storage.sync.set({ discord_id: discord_id }, () => {});
}
window.addEventListener("DOMContentLoaded", () => {
// console.info(`Testing: ${input.placeholder}`)
// check if discord ID is already stored
get_discord_id((discord_id) => {
console.info(`Console test:`);
if (discord_id != null) {
let input = document.getElementById("discord-id-input");
input.value = "";
input.placeholder = discord_id;
}
});
document.getElementById("discord-id-button").addEventListener("click", () => {
let input = document.getElementById("discord-id-input");
let value = input.value;
input.value = "";
input.placeholder = value;
chrome.runtime.sendMessage({ discord_id: value }, function(response) {
// console.info(response.discord_id);
});
set_discord_id(value);
e.target.disabled = "true";
});
});
HTML
<!DOCTYPE html>
<head>
<link rel = "stylesheet" href = "../css/style.css">
<script src = "../js/popup.js"></script>
</head>
<body>
<div class = "text-center">
<div class = "form-control mt10">
<input type = "text" id = "discord-id-input" name = "discord-id-input" placeholder = "Discord ID">
<button id = "discord-id-button" type = "submit" class = "submit"></button>
<a class = "help-text">ENTER DISCORD USER ID AND SUBMIT</a>
</div>
</div>
</body>
CSS
#discord-id-button {
box-shadow: 0 0 10px 0 #251431;
border-radius: 8px;
transition: 0.3s;
}
#discord-id-button:hover {
box-shadow: 0 0 10px 6px #251431;
}
#discord-id-input {
box-shadow: 0 2px 1px 0 #251431;
border-radius: 8px;
}
body {
background-image: url('../images/bg2.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 250px;
padding: 5px 15px 30px 15px;
width: 500px;
}
.text-center {
text-align: center;
}
*:focus {
outline: none;
}
.form-control {
align-items: center;
display: flex;
justify-content: center;
}
label {
display: block;
}
select,
input {
background: #582e79;
border-radius: 8px;
border: 1px #582e79;
color: #999;
margin-left: 60px;
margin-top: 135px;
padding: 5px 10px;
text-align: center;
width: 150px;
}
.mt10 {
margin-top: 20px;
}
.submit {
background-color: transparent;
background-image: url("../images/arrow.png");
background-position: center center;
background-repeat: no-repeat;
border: none;
height: 15px;
width: 50px;
margin-left: 15px;
margin-top: 135px;
outline: none;
padding-bottom: 25px;
}
.help-text {
position: fixed;
color: #FFFF;
font-size: 9px;
color: #999;
margin-top: 190px;
}
Отвечает ли это на ваш вопрос? Как отключить кнопку HTML с помощью JavaScript?
Привет, Роберт, вопрос действительно сказал мне, каков синтаксис для его использования, но я не знаю, где его разместить, а также проверить, имеет ли он уже установленное значение.
Затем включите эту информацию в свой вопрос.
Я упомянул об этом, что мне интересно, как я могу это сделать? Я включу, что это должно быть в моем коде :)
вы добавили onclick = "this.disabled=true" в html. вы пытались обернуть true` внутри одинарной кавычки, например onclick = "this.disabled='true'"
Я также только что протестировал с одинарными кавычками и без них, а также попытался обойтись без этой функции. Тот же результат :(
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ты можешь использовать
document.getElementById('button').disabled = "true";
Привет! хм, куда мне это поместить?
Добавьте прослушиватель событий отправки в форму и добавьте это внутри него.
Но я уже сделал, не так ли?
Я создал скрипку. Проверьте это jsfiddle.net/gc3v45dx
вы также можете достичь, используя onclick = "this.disabled='true'"
не забудьте использовать одинарную кавычку вокруг true
Только что проверил ваш пример с моим кодом, и похоже, что он не отключает его
Ну на моем устройстве работает нормально.
Смотрите видео здесь :) gyazo.com/cf71d0d937b2d8b7dbc4f529ac9f2490 - и я использовал оба ваших примера.
добавьте скриншот вашего кода тоже
Я отредактировал код в теме -> См. popup.js :)
Если вам нужен дополнительный стиль для отключенной кнопки, вы можете сделать это:
- добавьте два класса к вашей html-кнопке: enable и disabled. Затем при щелчке замените класс «отключен» на класс «включен» и удалите прослушиватель событий.
Если вы просто хотите отключить его, игнорируйте часть с классами и просто отключите его по щелчку.
Простая рабочий пример:
const button = document.querySelector("button");
const classes = button.classList;
button.addEventListener('click', handleClick)
function handleClick() {
//classes.replace('enabled', 'disabled');
button.disabled = true;
button.removeEventListener('click', handleClick)
}.disabled {
background: #ccc;
}<button class = "enabled"> submit</button>