Добавить и удалить текст с помощью 2 кнопок в javascript (условия: используйте div id 'divResult', журнал консоли.) - PullRequest
Новая
       38

Добавить и удалить текст с помощью 2 кнопок в javascript (условия: используйте div id 'divResult', журнал консоли.)

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

Я хочу сделать веб-страницу с 2 кнопками (Добавить, Удалить). Условия используют div id divResult , консольный журнал и после удаления этот div должен остаться. Это работает почти правильно, только последний шаг (удалить alinea) не работает. Можете ли вы помочь мне, как я могу это исправить? :-) 

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>2 buttons</title>
  <script >

var index = 1;

window.onload = function () {
  document.getElementById('Btn1').onclick = function () {

    var newElement = document.createElement('div');
    newElement.id = 'div' + index++;
    
    var node = document.getElementById('txtElement').value;
    var newNode = document.createTextNode(node);
    
    newElement.appendChild(newNode);

    console.log(newElement);
    document.getElementById('divResult').appendChild(newElement);
  };
  document.getElementById('Btn2').onclick = function () {
		
                var oldDiv = document.getElementById('txtElement')
				var alinea = oldDiv.querySelectorAll('p:last-child')[0]; 
				console.log(alinea + ' wordt verwijderd...');
				
				oldDiv.removeChild(alinea);
				console.log('verwijderd!');
  };
};
  </script>
</head>
<body>
  <p>Type your text in the text box and click on Button</p>
  <input type="text" id="txtElement">
  <button id="Btn1">Add</button>
  <button id="Btn2">Delete</button>
  <div id="divResult"></div>
  <div id="oldDiv"></div>
</body>

</html>

Ответы [ 2 ]

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

Я попробовал несколько вещей, переместил вещи вокруг. Я думаю, что он делает то, что вы хотите сейчас. 

	  var index = 1;

	  window.onload = function () {
			document.getElementById('Btn1').onclick = function () {

				 var newElement = document.createElement('div');
				 newElement.id = 'div' + index++;

				 var node = document.getElementById('txtElement').value;
				 var newNode = document.createTextNode(node);

				 newElement.appendChild(newNode);

				 console.log(newElement);
				 document.getElementById('divResult').appendChild(newElement);
			};
			document.getElementById('Btn2').onclick = function () {

				 var oldDiv = document.getElementById('txtElement');
				 var divResult = document.getElementById('divResult');
				 var alinea = divResult.querySelectorAll('div:last-child')[0];
				 console.log(alinea + ' wordt verwijderd...');

				 alinea.remove();
				 // divResult.removeChild(alinea);
				 console.log('verwijderd!');
			};
	  };
<p>Type your text in the text box and click on Button</p>
<input type="text" id="txtElement">
<button id="Btn1">Add</button>
<button id="Btn2">Delete</button>
<div id="divResult"></div>
<div id="oldDiv"></div>
0 голосов
/ 04 мая 2020

Если я вас правильно понимаю, измените следующий раздел: 

  document.getElementById('Btn2').onclick = function () {
            var alinea = document.getElementById('div'+ --index); 
            console.log(alinea.innerHTML + ' wordt verwijderd...');
            alinea.remove(alinea);
            console.log('verwijderd!');
    };
...