Javascript-форум - Ширина блоков из списка

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Ширина блоков из списка (https://javascript.ru/forum/dom-window/67270-shirina-blokov-iz-spiska.html)

Откуда взялось 50% понять не могу.

ksa,
Если даже сделать elems[i].style.width=percent + '%';
все равно выдаст 50% ширины.

Цитата:

Сообщение от Роман Андреевич

Полный пример

Пример у нас считается полным, когда его можно запустить прямо тут и увидеть конечный результат. ;)

Цитата:

Сообщение от Роман Андреевич

Откуда взялось 50% понять не могу.

У тебя пока проблемы с пониманием своего же алгоритма... :(

понимание простое, есть список li, и есть значения, нужно каждому li поставить сове значение.

Цитата:

Сообщение от Роман Андреевич

понимание простое, есть список li, и есть значения, нужно каждому li поставить сове значение.

Но в своем скрипте пишешь ты совсем другое. :)

Вот как выглядит именно полный пример. ;)

<!DOCTYPE html>
<style type='text/css'>
li {
	height: 10px;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
var wid = {
	one: {
		value: 150
	},
	two: {
		value: 100
	},
	three: {
		value:50
	},
	four: {
		value:400
	}
}
</script>
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<script type='text/javascript'>
var elems = document.querySelectorAll('ul li');
var i=0;
for (var s in wid) {
	elems[i++].style.width=wid[s].value + 'px';
}
</script>

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
</head>
<body>
		<ul class="balance element">
			<li class="title"></li>
			<li class="total"></li>
		</ul>
</body>
</html>

;(function() {
"use strict";

	function Machine() {

		var   main_balance_total = document.querySelector('.total'),
			components = {
				water: {
					value: 0,
				},
				coffee: {
					value: 0,
				},
				sugar: {
					value: 0,
				},
				milk: {
					value: 0,
				},
				caps: {
					value: 0,
				}
			}

		this.default = function() {
			_addParams();
			_checkParams();
		}

		function _addParams() {
			var total = document.createElement('ul');
				
				main_balance_total.append(total);

			for (var key in components) {
				var li_total = document.createElement('li');

				var percent = Math.round((components[key].value/100);

				li_total.classList.add('balance_item');
				li_total.innerHTML = '<span class="' + key + '"></span>';
				
				total.append(li_total);
			}
		}

		function _checkParams() {
			var span = {
					water: main_balance_total.querySelector('span.water'),
					coffee: main_balance_total.querySelector('span.coffee'),
					sugar: main_balance_total.querySelector('span.sugar'),
					milk: main_balance_total.querySelector('span.milk'),
					caps: main_balance_total.querySelector('span.caps')
				},
				spans = main_balance_total.querySelectorAll('span');



			for (var i =0;i < spans.length;i++) {
				for (var s in components){
					var percent = Math.round((components[s].value*100)/components[s].parent);	
					spans[i].style.width = percent + '%';
				}
			}

		}



	}

	var machine = new Machine();

	machine.default();
})();

Роман Андреевич, порядок ключей в обьекте не гарантируется браузерами, поэтому надёжнее массив
[{value: 150},{value: 100}, .....]

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 ul{
   width: 20%;
 }

  li{
    height: 7px;
    margin: 7px;
    background-color: #0000FF;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
/*объект значений ширины*/
var wid = {
one: {
value: 150
},
two: {
value: 100
},
three: {
value:50
},
four: {
value:400
}
}
/* список элементов*/
var elems = document.querySelectorAll('ul li');
Object.keys(wid).forEach(function(el,i) {
       elems[i].style.width = wid[el].value+'%';
});
/*Далее необходимо задать всем li из списка ширину - значения в объекте wid*/

    });
  </script>
</head>

<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>


</body>
</html>

Спасибо, вроде разобрался