Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.01.2020, 11:20
Новичок на форуме
Отправить личное сообщение для Da-bro Посмотреть профиль Найти все сообщения от Da-bro
 
Регистрация: 13.01.2020
Сообщений: 4

Работа с событием Input. Дублирование в div при помощи onclick
Здравствуйте.
Дано html в котором имеется input (Код напишу ниже). Необходимо сделать скрипт таким образом, чтобы при вводе в input введенные значения дублировались ниже в центр квадрата(то есть в собственный div). Если нажать на этот квадрат, то он удаляется вместе с буквой и из div и из Input. Задачу нужно решить на чистом JS.
Помогите разобраться с темой и решить задачу.
Вот до чего я сам дошел, но код работает не совсем так как надо и не до конца.
Я новичок, не судите строго за код) .

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="description" content="">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Roboto:100&display=swap" rel="stylesheet">
</head>
<style>
	#fix {
		display: flex; 
		flex-wrap: wrap; 
		width: 100%;
		height: auto;
	}
	.mix{
		color: White;
		background-color: #1C3CE3FF;
		width: 30px;
		height: 30px;
		margin: 5px;
		text-align: center;
		font-size: 24px;
	}
</style>

<title>Алфавит</title>
</head>
<body>
	<div id="fix"></div>
	<input type="text" id="myInput" placeholder="Введите тект" class="Inp" >

	

</body>
<script>
		const inp_var = document.getElementById("myInput")
		inp_var.addEventListener("input", function(e){
			if (event.inputType === "deleteContentBackward") {
				return ;
			};
			const inp_value = inp_var.value;
			console.log(event);
			const para = document.createElement('div');
			para.className = "mix";
			document.getElementById("fix").appendChild(para);
			para.innerHTML = enter_text(inp_value);
			function enter_text (text){
				let end_text = '';
				for (let i = 0; i < text.length ; i++) {
					end_text = text[i];
				}
				return end_text;
			}
			para.onclick = function(q) {
				/*this.hidden=true;*/
				document.getElementById("myInput")
				document.getElementById("fix").removeChild(para);
				inp_var.slice(1, 2);
				console.log(para.id);
			};

			const elementID = document.getElementsByClassName("mix");
			for (let i = 0; i < elementID.length ; i++) {
				elementID[i].id = i;	
			};
		});
</script>
</html>

Последний раз редактировалось Da-bro, 14.01.2020 в 11:31.
Ответить с цитированием
  #2 (permalink)  
Старый 14.01.2020, 11:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Da-bro,
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="description" content="">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100&display=swap" rel="stylesheet">
<style>
    #fix {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
    }
    .mix{
        color: White;
        background-color: #1C3CE3FF;
        width: 30px;
        height: 30px;
        margin: 5px;
        text-align: center;
        font-size: 24px;
    }
</style>

<title>Алфавит</title>
</head>
<body>
    <div id="fix"></div>
    <input type="text" id="myInput" placeholder="Введите тект" class="Inp" >



</body>
<script>
        const inp_var = document.getElementById("myInput");
        const enter_text = text => [...text].map(a => {
                const para = document.createElement('div');
                para.className = "mix";
                para.textContent = a;
                return para
            })

        const out = _ => {
            const inp_value = inp_var.value;
            fix.textContent = "";
            fix.append(...enter_text(inp_value))
        }
        inp_var.addEventListener("input", out)
        inp_var.addEventListener("keyup", out)

        fix.addEventListener("click", ({target}) => {
        if(target = target.closest(".mix")) {
            target.remove();
            inp_var.value = fix.textContent;
            out()
        }
        })

</script>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2020, 11:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Da-bro
Если нажать на этот квадрат, то он удаляется вместе с буквой и из div и из Input.
Помогите разобраться с темой и решить задачу.
Например, так...
<!DOCTYPE html>
<html>
<head>
	<title>Алфавит</title>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Roboto:300&display=swap" rel="stylesheet">
</head>
<style>
	html {
		font: 1em Roboto, sans-serif;
	}
	input, button {
		font: inherit;
	}
	#fix {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
	}
	.mix {
		border: none;
		color: white;
		background-color: #1C3CE3;
		width: 30px;
		height: 30px;
		margin: 5px;
		text-align: center;
		font-size: 24px;
	}
</style>
</head>
<body>
	<input type="text" id="myInput" placeholder="Введите текст" class="Inp">
	<div id="fix"></div>
</body>
<script>
	const fix = document.getElementById("fix"), myInput = document.getElementById("myInput");
	myInput.addEventListener("input", function(event) {
		const target = event.target;
		fix.textContent = "";
		
		for(const character of target.value) {
			const button = document.createElement("button");
			button.className = "mix";
			button.textContent = character;
			fix.append(button);	
		}
	});
	fix.addEventListener("click", function(event) {
		const target = event.target.closest(".mix");
		if(!target) return;
		target.remove();
		myInput.value = fix.textContent;
	});
</script>
</html>


Сообщение от Da-bro
Я новичок, не судите строго за код)
Используйте вместо <div> — кнопку <button>

Последний раз редактировалось Malleys, 14.01.2020 в 12:02.
Ответить с цитированием
  #4 (permalink)  
Старый 14.01.2020, 11:59
Новичок на форуме
Отправить личное сообщение для Da-bro Посмотреть профиль Найти все сообщения от Da-bro
 
Регистрация: 13.01.2020
Сообщений: 4

Спасибо, а можно без стрелочных функций?
И если что можно задать вам вопросы по коду, чтобы разобраться?
Ответить с цитированием
  #5 (permalink)  
Старый 14.01.2020, 12:02
Новичок на форуме
Отправить личное сообщение для Da-bro Посмотреть профиль Найти все сообщения от Da-bro
 
Регистрация: 13.01.2020
Сообщений: 4

Сообщение от Malleys Посмотреть сообщение
Например, так...
<!DOCTYPE html>
<html>
<head>
	<title>Алфавит</title>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Roboto:300&display=swap" rel="stylesheet">
</head>
<style>
	html {
		font: 1em Roboto, sans-serif;
	}
	input, button {
		font: inherit;
	}
	#fix {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
	}
	.mix {
		border: none;
		color: white;
		background-color: #1C3CE3;
		width: 30px;
		height: 30px;
		margin: 5px;
		text-align: center;
		font-size: 24px;
	}
</style>
</head>
<body>
	<input type="text" id="myInput" placeholder="Введите текст" class="Inp">
	<div id="fix"></div>
</body>
<script>
	const fix = document.getElementById("fix"), myInput = document.getElementById("myInput");
	myInput.addEventListener("input", function(event) {
		const target = event.target;
		fix.textContent = "";
		
		for(const character of target.value) {
			const button = document.createElement("button");
			button.className = "mix";
			button.textContent = character;
			fix.append(button);	
		}
	});
	fix.addEventListener("click", function(event) {
		const target = event.target.closest(".mix");
		if(!target) return;
		target.remove();
		myInput.value = fix.textContent;
	});
</script>
</html>


Используйте вместо <div> — кнопку <button>
Malleys,
Спасибо. Буду сейчас разбираться с кодом, если что можно будет обратиться к вам с вопросами?
Ответить с цитированием
  #6 (permalink)  
Старый 14.01.2020, 12:03
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Da-bro
Спасибо, а можно без стрелочных функций?
Можно! А что с ними не так?

Сообщение от Da-bro
И если что можно задать вам вопросы по коду, чтобы разобраться?
Да!
Ответить с цитированием
  #7 (permalink)  
Старый 14.01.2020, 12:10
Новичок на форуме
Отправить личное сообщение для Da-bro Посмотреть профиль Найти все сообщения от Da-bro
 
Регистрация: 13.01.2020
Сообщений: 4

Сообщение от Malleys
Можно! А что с ними не так?
С ними все хорошо. Это я просто пока не разбирался как они пишутся и соответственно читаются. По рекомендациям, говорят, новичку(мне) лучше писать код полностью, чтобы не запутаться.
Спасибо за помощь, если что вопросы напишу в тему ниже, чтобы если другие с такой же проблемой столкнуться, чтобы понимали как ее решить.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавлять class в div при вводе текста в input skwz Общие вопросы Javascript 9 06.01.2017 00:10
Отправка файла на email при помощи Ajax vah-smile AJAX и COMET 7 19.11.2016 16:41
Развернуть скрытый DIV при загрузке шАкфьу Krakozavr Javascript под браузер 4 15.04.2016 10:40
Закрыть DIV при клике в нем на ссылку или баннер xavibeat Общие вопросы Javascript 1 30.03.2016 20:41
Работа с блоком комментариев vk.com при помощи javascript Q0001 Общие вопросы Javascript 5 25.10.2013 23:55