Форум

ALEX1992 · #1 (**permalink**) 28.07.2017, 13:57

Всем привет. Есть задание создать HTML-страницу и написать код JavaScript, который будет отображать данные из объекта JSON со структурой следующим образом:
Безымянный.jpg
Попытался взаимодействовать с JSON через JSON.parse и добавил стили элементам:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   #marketing{
    width: 100px; 
    margin: 30px; 
    padding: 30px; 
    border: 4px solid black; 
    background: #9932CC; 
text-align:center;
box-shadow: 0 0 20px rgba(0,0,0,2);
   }


#sales{
    width: 100px; 
    margin: 30px; 
    padding: 30px; 
    border: 4px solid black; 
    background: #1E90FF; 
text-align:center;

   }




  </style>
</head>
<body>


<div class="mark"><div id="marketing"></div></div>


<div class="sal"><div id="sales"></div></div>


<script>
var s = '{"title" : "marketing"}';
var s1 = '{"title" : "sales"}';

var obj = JSON.parse(s);
var obj1 = JSON.parse(s1);



document.getElementById("marketing").innerHTML +=
obj.title + "<br>";
 
document.getElementById("sales").innerHTML +=
obj1.title + "<br>";





</script>

</body>
</html>

вот что вышло
Безымянный (1).jpg
Выглядит как нужно, но мне нужно повторять эти блоки, чтобы один шел за другим несколько раз, как размножить

<div class="mark">

и

<div class="sal">

?

Dilettante_Pro · #2 (**permalink**) 28.07.2017, 14:50

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
   .marketing{
       float:left; 
       width: 100px; 
       margin: 10px; 
       padding: 30px; 
       border: 4px solid black; 
       background: #9932CC; 
       text-align:center;
       box-shadow: 0 0 20px rgba(0,0,0,2);
   }
   .sales{
       float:left; 
       width: 100px; 
       margin: 10px; 
       padding: 30px; 
       border: 4px solid black; 
       background: #1E90FF; 
       text-align:center;
   }
  </style>
</head>
<body>
</body>
  <script>
      var s = '[{"title" : "marketing"},{"title" : "sales"},{"title" : "marketing"},{"title" : "sales"}]';

      var obj = JSON.parse(s);
      for(var i = 0; i < obj.length;i++){
          var div = document.createElement('div');
          div.className = obj[i].title;
          div.innerText =  obj[i].title;
          document.querySelector('body').appendChild(div);
      }
  </script>
</html>

ALEX1992 · #3 (**permalink**) 28.07.2017, 15:16

Сообщение от Dilettante_Pro

document.querySelector('body').appendChild(div);

большое спасибо, даже разобрался почти, кроме того,как здесь работает эта функция

document.querySelector('body').appendChild(div);

еще хотел бы спросить, как лучше добавить звездочки для блоков с "marketing" как на скриншоте в начале поста?

рони · #4 (**permalink**) 28.07.2017, 15:48

Сообщение от ALEX1992

добавить звездочки для блоков с "marketing"

строка 16

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
   .marketing{
       float:left;
       width: 100px;
       margin: 10px;
       padding: 30px;
       border: 4px solid black;
       background: #9932CC;
       text-align:center;
       box-shadow: 0 0 20px rgba(0,0,0,2);
   }
   .marketing:before{
      color: #FFD700;
      margin-right: 6px;
      content: '★'
   }

   .sales{
       float:left;
       width: 100px;
       margin: 10px;
       padding: 30px;
       border: 4px solid black;
       background: #1E90FF;
       text-align:center;
   }
  </style>
</head>
<body>
</body>
  <script>
      var s = '[{"title" : "marketing"},{"title" : "sales"},{"title" : "marketing"},{"title" : "sales"}]';
      var obj = JSON.parse(s),
      body = document.querySelector('body'),
      f = document.createDocumentFragment(),
      div = document.createElement('div');
      obj.forEach(function(el) {
         div.className = div.innerText = el.title;
         f.appendChild(div.cloneNode(true));
      });
      body.appendChild(f)
  </script>
</html>

Dilettante_Pro · #5 (**permalink**) 28.07.2017, 16:00

ALEX1992,

Сообщение от ALEX1992

как здесь работает эта функция
document.querySelector('body').appendChild(div);

Так и работает, как написано - в тег body добавляет создаваемые div

Форум

Справочник

Discord чат

Курсы javascript