После нажатия кнопки в * div * текст отображается как заголовок 1 <h1>, второй щелчок <h2> et c. После 6 следующий текст (седьмой) снова как <h1> - PullRequest
Новая
       11

После нажатия кнопки в * div * текст отображается как заголовок 1 <h1>, второй щелчок <h2> et c. После 6 следующий текст (седьмой) снова как <h1>

0 голосов
/ 04 мая 2020

Я хочу создать веб-сайт с текстовым полем, кнопкой с помощью переключателя -case и div с идентификатором 'divResult'. Если вы нажмете на кнопку, он отобразит текст из текстового поля как заголовок 1 <h1>, после второго щелчка как <h2> et c. После 6 следующий текст (7-й) снова <h1>. Работает правильно, только последний шаг (текст в h1-h6) не работает. 

<!Doctype HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>7-3</title>
  <script >
    
var index = 1;
var countClicks = 0;

window.onload = function () {
  document.getElementById('btnKnop').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);


  countClicks++;
  switch (countClicks) {
    case 1: {
      console.log('heading text 1');
      break;
    }
    case 2:{
      console.log('heading text 2');
      break;
    }
    case 3:{
      console.log('head text 3');
      break;
    }
    case 4:{
      console.log('heading text 4');
      break;
    }
    case 5:{
      console.log('heading text 5');
      break;
    }
    case 6:{
      console.log('heading text 6');
      countClicks = 0;
      break;
      }
    }
       
  };
};  
  </script>
</head>
<body>
  <input type="text" id="txtElement">
  <button id="btnKnop">Add</button>
  <div id="divResult"></div>
  

</body>


</html>

1 Ответ

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

Вот пример использования вашего HTML и маленького JS, вам не нужен оператор switch для этого 

var txtInput = document.querySelector("#txtElement"),
  resultElement = document.querySelector("#divResult"),
  ind = 0;

document.querySelector("#btnKnop").onclick = function() {
  ind = ind++ === 6 ? 1 : ind;
  resultElement.innerHTML += `<h${ind}>${txtInput.value}</h${ind}>`;
}
<input type="text" id="txtElement">
<button id="btnKnop">Add</button>
<div id="divResult"></div>

Поскольку вам нужно использовать оператор switch для вашего выполнения, это может быть так: 

var txtInput = document.querySelector("#txtElement"),
  resultElement = document.querySelector("#divResult"),
  countClicks = 1;

document.querySelector("#btnKnop").onclick = function() {
  var h = "";
  switch(countClicks++) {
    case 1: h = "h1"; break;
    case 2: h = "h2"; break;
    case 3: h = "h3"; break;
    case 4: h = "h4"; break;
    case 5: h = "h5"; break;
    case 6: h = "h6"; countClicks = 1; 
  }
  resultElement.innerHTML += `<${h}>${txtInput.value}</${h}>`;
}
<input type="text" id="txtElement">
<button id="btnKnop">Add</button>
<div id="divResult"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...