2013-02-15 5 views
0

Я пытаюсь создать выпадающие списки при нажатии кнопки отправки. Это приведет к циклу while, чтобы сделать многочисленное количество списков. В настоящее время у меня есть следующий код, но он не работает должным образом.Как показать элементы html

<html> 
    <head> 
     <script type="text/javascript"> 
      function getvalue() { 
       number = document.getnumber.input.value; 
       document.getElementById("result").value = number; 
      } 
     </script> 
    </head> 
    <body> 
     <script> 
      function generatedropdown() { 
       while (i < number) { 
        html = '<select name="select" id="i">'; 
        html += '<option>Test 1</option>'; 
        html += '<option>Test 2</option>'; 
        html += '<option>Test 3</option>'; 
        html += '<option>Test 4</option>'; 
        html += '<option>Test 5</option>'; 
        html += '</select>'; 

        innerHTML = html; 
        i++; 
       } 
      } 
     </script> 
     <form name="getnumber">Input number: 
      <input type="text" name="input"> 
      <input type="button" value="Next" onClick="getvalue()"> 
     </form> 
     <form id="showlists">Number entered: 
      <input type="text" id="result" readonly="readonly"> 
      <input type="button" value="Show lists" onClick="generatedropdown()"> 
     </form> 
    </body> 
</html> 

EDIT: Я никогда изменил код на это, но до сих пор не повезло.

<html> 
<head> 
<script type="text/javascript"> 

function getvalue() { 
number = document.getnumber.input.value; 
document.getElementById("result").value = number; 
} 
</script> 

</head> 
<body> 

<script> 
function generatedropdown() { 
html = '<select name="select" id="i">'; 
while (i < number) {    
html+='<option>Test 1</option>'; 
html+='<option>Test 2</option>'; 
html+='<option>Test 3</option>'; 
html+='<option>Test 4</option>'; 
html+='<option>Test 5</option>';   
i++; 
} 
html+='</select>'; 
document.getElementById("my-output").innerHTML = html; 
} 
</script> 


<form name="getnumber"> 
Input number: <input type="text" name="input"> 
<input type="button" value="Next" onClick="getvalue()"> 
</form> 


<form id="showlists"> 
Number entered: <input type="text" id="result" readonly="readonly">  
<input type="button" value="Show lists" onClick="generatedropdown()"> 
<div id="my-output">Generated List:</div> 
</form> 
</body> 
</html> 

ответ

0

ваш синтаксис является неправильным, в первую очередь вы должны вызвать getvalue() перед вызовом generatedropdown(), а затем, вместо innerHTML = html; использования document.getElementById('YOUR_CONTAINER_ID').innerHTML = html;

1

Вы можете использовать .innerHTML на элементах только, например, так:

document.body.innerHTML = 'This is my output'; 

Теперь ваши body будут заполнены определенным контентом. В случае, если вы хотите поместить его в другой элемент, как div, вы должны создать что div первый ...

<div id="my-output"></div> 

Тогда получить и применить содержание:

document.getElementById('my-output').innerHTML = 'This is my output'; 
1
html = '<select name="select" id="i">'; 
while (i < number) {    
    html+='<option>Test 1</option>'; 
    html+='<option>Test 2</option>'; 
    html+='<option>Test 3</option>'; 
    html+='<option>Test 4</option>'; 
    html+='<option>Test 5</option>';   
    i++; 
} 
html+='</select>'; 
document.getElementById('your_element_id').innerHTML = html; 
Смежные вопросы