Форум

crystaltrumpet · #1 (**permalink**) 12.12.2017, 03:17

window.onload может сработать только в одном месте
чем можно его заменить чтобы срабатывало тогда когда встречается
div id='box'?

Возможно есть какой либо другой вариант обернуть каждый символ в отдельный background чтобы каждая буква была отдельно.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      #box div{
        padding: 3px;
        background-color: #FF00FF;
         border-radius: 50%;
         width: 20px;
         text-align: center;      }

  </style>
  </head>

<body>
<div id='box' style='display: flex'>Требуется обернуть каждый символ в DIV</div>
<div id='box' style='display: flex'>А второй раз уже не срабатывает</div>

 <script>

window.onload = function() {
var txt = box.textContent, html='';
for (var i=0; i<txt.length; i++)  {html+='<div>' + txt[i] + '</div>'}

box.innerHTML = html;
 }

</script>

</body>

</html>

void() · #2 (**permalink**) 12.12.2017, 08:06

<!DOCTYPE HTML>
<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
</head>
<body>

	<div id='box' style='display: flex'>Требуется обернуть каждый символ в DIV</div>
	<div id='box' style='display: flex'>А второй раз уже не срабатывает</div>
	<div id='box' style='display: flex'>Так сработает на каждом id=box</div>
	
	<script>
		window.onload = function() {
			var arrBox = document.querySelectorAll('#box');
			for (var i=0; i<arrBox.length; i++)  {
				var html='';
				for(var k = 0; k < arrBox[i].innerHTML.split('').length; k++){
					html+='<div>' + arrBox[i].innerHTML.split('')[k] + '</div>';
				}
				arrBox[i].innerHTML = html;
			}
		}
	</script>

	<style type="text/css">
	#box div{
		padding: 3px;
		background-color: #FF00FF;
		border-radius: 50%;
		width: 20px;
		text-align: center;      }
	</style>
</body>
</html>

рони · #3 (**permalink**) 12.12.2017, 12:27

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .box{
    display:flex;
  }

  .box div{
    padding:3px;
    border-radius:50%;
    width:20px;
    text-align:center;
  }

  .box div.n{
    background-color:#FFE0FF;
  }

  .box div.f{
    background-color:#FF00FF;
  }
  </style>
<script>
  window.addEventListener("DOMContentLoaded", function() {
  [].forEach.call(document.querySelectorAll(".box"), function(a) {
    a.innerHTML = [].map.call(a.textContent, function(a) {
      return "<div class="+(a == " "? "n" : "f")+">" + a + "</div>";
    }).join("");
  });
 });
  </script>
</head>
<body>
  <div class='box' >Требуется обернуть каждый символ в DIV</div>
  <div class='box' >А второй раз уже не срабатывает</div>
  <div class='box' >Так сработает на каждом id=box</div>
</body>
</html>

рони · #4 (**permalink**) 12.12.2017, 12:32

crystaltrumpet,
id уникально, для однотипных элементов лучше использовать class

crystaltrumpet · #5 (**permalink**) 12.12.2017, 23:26

Ронни в который раз восхищаюсь Вами как человеком. Сколько лет и вы стольким людям помогаете!

crystaltrumpet · #6 (**permalink**) 12.12.2017, 23:27

Войд! Большущее спасибо! Выручаете!

Форум

Справочник

Discord чат

Курсы javascript