Javascript-форум - Как правильно задать ID в создаваемом элементе ?

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

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как правильно задать ID в создаваемом элементе ? (https://javascript.ru/forum/events/11714-kak-pravilno-zadat-id-v-sozdavaemom-ehlemente.html)

Как правильно задать ID в создаваемом элементе ?

Здравствуйте, Господа!
На днях нарисовал вот такое чудовище:

<script>
    a=[];
    a[0]=100;
    a[1]=200;
    a[2]=300;
    a[3]=400;
    a[4]=500;
    a[5]=600;

    b=[];
    b[0]='самолет';
    b[1]='чайник';
    b[2]='утюг';
    b[3]='кефир';
    b[4]='стол';
    b[5]='арбалет';

    h=[];
    h[0]=h0;
    h[1]=h1;
    h[2]=h2;
    h[3]=h3;
    h[4]=h4;
    h[5]=h5;
 
function fr(i){
 
 var div=document.createElement('div');
  div.innerHTML='Вы выбрали '+b[i]+' ( '+a[i]+' руб. ) '
+'<input type="text" id="h[i]" value="1" onKeyUp="pr(i)"  size="5" 
 />'+' шт.';
    alert(h[i]);
     mid.appendChild (div);
}

</script>

:lol: :lol: :lol: да, можно смеяться!
при нажатии на кнопочку

<input  type="button" value="tratata" onclick="fr(4)">

вот здесь

<div name="mid" id="mid"></div>

появляется строка:
"Вы выбрали стол ( 500 руб. ) (здесь еще input) шт.".

Алерт в функции для того, чтобы узнать ID инпута, но он выдает undefined , т.е. я так понимаю ID так не задать.
:agree: можно прекратить смеяться.

Подскажите пжл. как правильно задать ID в создаваемом элементе , т.к.
кнопок много и не хочется для каждой рисовать отдельную функцию.
Заранее благодарен!

<input id="4" type="button" value="tratata" onclick="fr()">

А в функции через this обращаться к id и далее по задаче...:-?

h[0]=h0; = > h[0]='h0';

id="h[i]" = > id="'+h[i]+'"

и того

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<body>
<script>
    a=[];
    a[0]=100;
    a[1]=200;
    a[2]=300;
    a[3]=400;
    a[4]=500;
    a[5]=600;

    b=[];
    b[0]='самолет';
    b[1]='чайник';
    b[2]='утюг';
    b[3]='кефир';
    b[4]='стол';
    b[5]='арбалет';

    h=[];
    h[0]='h0';
    h[1]='h1';
    h[2]='h2';
    h[3]='h3';
    h[4]='h4';
    h[5]='h5';

function fr(i){

 var div=document.createElement('div');
  div.innerHTML='Вы выбрали '+b[i]+' ( '+a[i]+' руб. ) '
+'<input type="text" id="'+h[i]+'" value="1" onKeyUp="pr('+i+')"  size="5" onclick="alert(this.id)" />'+' шт.';
  document.getElementById('mid').appendChild (div);
}

</script>
<input  type="button" value="tratata" onclick="fr(4)">


<div name="mid" id="mid"></div>

</body>

</html>

Вау....ожидал:"Да ты тупой" или "Что ты делаешь в JS"....
Спасибо.....отпишу о результатах

можно я еще потуплю ?

function fr(i){
 var div=document.createElement('div');
  div.innerHTML='Вы выбрали '+b[i]+' ( '+a[i]+' руб. ) '
+'<input type="text" id="'+h[i]+'" value="1" onKeyUp="pr('+i+')"  size="5" onclick="alert(this.id)" />'+' шт.'+'  <span id="q1" >введите кол-во</span>';
  document.getElementById('mid').appendChild (div);
}

задали ID, затем

function pr(i){
var f=a[i];

var g=document.getElementById("'+h[i]+'").value;
var p=f*g;
document.getElementById('q1').innerHTML = p;
}

то происходит вот что:
document.getElementById("'+h[i]+'") is null

а если в input id="'+h[i]+'" поменять на id="homyakpoklonikvolta", ну или просто id="z" и g=document.getElementById("z").value; то скрипт работает, а это не совсем то (точнее совсем не то), что я хотел.
Толкните пжл. в нужную сторону, подскажите , что я не так сделал?

function pr(i){
var f=a[i];
var g=document.getElementById(h[i]).value;
if(Number(g))document.getElementById('q1').innerHTML=f*Number(g);
}

Цитата:

Сообщение от рони (Сообщение 70427)

var g=document.getElementById(h[i]).value;

}

Рони, спасибо!
А я этот вар. тоже пробовал, но h[i] у меня в кавычках был.
Да, через НЕТ можно фотошоп изучить, а JS все же лучше хотя бы на курсах.
Еще раз спасибо.

Ну как-то так:

<html><head>
</head>
<body>


<script>
    a=[];
    a[0]=100;
    a[1]=200;
    a[2]=300;
    a[3]=400;
    a[4]=500;
    a[5]=600;
 
    b=[];
    b[0]='самолет';
    b[1]='чайник';
    b[2]='утюг';
    b[3]='кефир';
    b[4]='стол';
    b[5]='арбалет';
 
    h=[];
    h[0]='h0';
    h[1]='h1';
    h[2]='h2';
    h[3]='h3';
    h[4]='h4';
    h[5]='h5';

    g=[];
    g[0]='g0';
    g[1]='g1';
    g[2]='g2';
    g[3]='g3';
    g[4]='g4';
    g[5]='g5';

    p=[];
    p[0]='p0';
    p[1]='p1';
    p[2]='p2';
    p[3]='p3';
    p[4]='p4';
    p[5]='p5';
 

function fr(i){
 
 var div=document.createElement('div');
  div.innerHTML='<strong>'+b[i]+'</strong>'+'<br />'+'цена: '+a[i]+' руб. '
+'<input type="text" id="'+h[i]+'" value="0" onKeyUp="pr('+i+')"  size="5"  />'+' шт.'+'  <span id="'+p[i]+'" >введите кол-во</span>';
  document.getElementById('mid').appendChild (div);
  }
function pr(i){
var g=document.getElementById(h[i]).value;
var f=a[i];
if(Number(g))
document.getElementById(p[i]).innerHTML=f*Number(g);
}


function obsh(){

var tb= document.getElementById('mid');
var spanArray  = tb.getElementsByTagName('span');
var sum = 0;
for (j = 0; j < spanArray.length; j++) {
sum = sum + parseFloat(spanArray[j].innerHTML);}
document.getElementById('total').innerHTML = sum;  
}
</script>


<input  type="button" value="самолет" onclick="fr(0)"><br />
<input  type="button" value="чайник" onclick="fr(1)"><br />
<input  type="button" value="утюг" onclick="fr(2)"><br />
<input  type="button" value="кефир" onclick="fr(3)"><br />
<input  type="button" value="стол" onclick="fr(4)"><br />
<input  type="button" value="арбалет" onclick="fr(5)"><br />

 


<form name="mainform"  method="post" action="mail.php">

<div name="mid" id="mid"></div>


<input  type="button" value="итого:" onclick="obsh()">
<span id='total' name='total'></span>

</form>

</body>
</html>

корявенько, громоздко и даже возможно смешно, но немного CSS, HTML и фотошопа и интернет-магазин заработает (просто один малый за подобное попросил 10 килорублей)
Рони, огромное мерси за помощь!!!!

:write:

function obsh(){

var tb= document.getElementById('mid');
var spanArray  = tb.getElementsByTagName('span');
var sum = 0;
for (j = 0; j < spanArray.length; j++) {
if(parseFloat(spanArray[j].innerHTML))sum += parseFloat(spanArray[j].innerHTML);}
document.getElementById('total').innerHTML = sum;
}

не большая модернизация

function fr(i){
if (document.getElementById(h[i])) {
 
  alert('Этот товар уже в корзине');}
    else {
 
 var div=document.createElement('div');
  div.innerHTML='<strong>'+b[i]+'</strong>'+'<br />'+'цена: '+a[i]+' руб. '
+'<input type="text" id="'+h[i]+'" value="0" onKeyUp="pr('+i+')"  size="5"  />'+' шт.'+'  <span id="'+p[i]+'" >введите кол-во</span>';
  document.getElementById('mid').appendChild (div);
  }
  }

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

Хочу немного продолжить.
Скажем есть страничка

....
<body onload="start()">
<div id="c0">
<div id="c1">
<div id="c2">
......
<div id="c19">
</body>
..........

ну и скрипт

a=[];
    a[0]=100;
    a[1]=350;
    a[2]=450;
   .......
    a[19]=120;

function start(){
document.getElementById('c0').innerHTML =a[0];
document.getElementById('c1').innerHTML =a[1];
...........
document.getElementById('c19').innerHTML =a[19];
}

т.е. при загрузке страницы дивы "заполняются" соответствующими a[i]....это работает, но уж очень громоздко выглядит....
я пытался сделать так:

a=[];
    a[0]=100;
    a[1]=350;
    a[2]=450;
   .......
    a[19]=120;

    c=[];
    c[0]='c0';
    c[1]='c1';
    c[2]='c2';
   .......
    c[19]='c19';

function start(i){
for (i= 0; i < c[].length; i++){
document.getElementById('c[i]').innerHTML =a[i];
}}

......но что-то явно не так......толкните пжл. в нужном направлении

Indiana,
В массиве имён нет необходимости

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
a=[];
    a[0]=100;
    a[1]=350;
    a[2]=450;

function start(){
for (i= 0; i < a.length; i++){
document.getElementById('c'+i).innerHTML =a[i];
}}
</script>
</head>

<body onload="start()">
<div id="c0"></div>
<div id="c1"></div>
<div id="c2"></div>
</body>
</html>

getElementById('c'+i)

Да, я бы сам никогда не додумался...........спасибо за помощь,Рони.

Сразу же, после загрузки странцы DIV-ы заполняются некими значениями. При чём не по клику или ещё чему нибудь, а при загрузке. Зачем это делать? Если не секрет конечно.

не секрет..........есть 200 позиций в интернет ларьке (он нарисован на Html)......цены меняются очень быстро и менять их не очень просто вручную......а данный способ позволит мне менять цены из JS файла...аля база данных