Een compleet voorbeeld zou ook fijn zijn...
- mySecondFunction() mist het keyword
function
- in principe hoeven er geen [rechte haken] om
[ i
] te staan
<!-- https://www.phphulp.nl/php/forum/topic/value-is-undefined/102935 -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="input-element-met-getal"> input-element-met-getal <button type="button" onclick="myFirstFunction();">go</button><br>
<br>
<div id="element" style="background-color: #ccffcc; padding: 10px;"></div>
<br>
<div id="another-element" style="background-color: #ffcccc; padding: 10px;"></div>
<script type="text/javascript">
//<![CDATA[
function myFirstFunction(){
x = [];
getal = document.getElementById('input-element-met-getal');
getal = getal.value;
getal = parseInt(getal);
for(i=0; i<getal; i++){
x[i] = '<input type="text" class="item" value="waarde '+i+'">';
}
document.getElementById('element').innerHTML = x.join('');
mySecondFunction();
}
function mySecondFunction(){
y = [];
item = document.querySelectorAll('.item');
for(i=0; i<item.length; i++){
itemValue = item[i].value;
y[i] = '<div>'+itemValue +'</div>';
}
document.getElementById('another-element').innerHTML = y.join('');
}
//]]>
</script>
</body>
</html>
Link gekopieerd
Bedankt voor je reactie Thomas,
Ik wilde geen overbodige code plaatsen om het overzichtelijk te houden.
vandaar dat het niet compleet was.
Ik heb de blokhaakjes weggehaald. Het is toch jammer dat ik zulke foutjes over het hoofd blijf zien.
Echter blijft mijn eigen script 'undifined' retourneren.
Daarom heb ik hieronder toch maar de code klakkeloos gekopieerd uit mijn editor.
Ik zal wel weer iets over het hoofd zien.
<!-- https://www.phphulp.nl/php/forum/topic/value-is-undefined/102935 -->
<!DOCTYPE html>
<html>
<head>
<style>
h3{
margin: 5px;
font-size: 16px;
}
.edit-item{
float: left;
}
#count-bar{
clear: both;
}
</style>
<title></title>
</head>
<body>
<div id="edit-catcher"></div>
<div id="count-bar">
<h3>number of items</h3>
<button class="count-button" onclick=itemCounter(-1)>–</button>
<button class="count-button" onclick=itemCounter(1)>+</button>
<input type="text" id="item-counter" value="5" readonly>
<div id="item-wrap"></div>
</div>
<script type="text/javascript">
//<![CDATA[
function itemCounter(n){
count = document.getElementById('item-counter').value;
count = parseInt(count);
if(count == 1 && n == -1){
document.getElementById('item-counter').value = 1;
count = count;
alert('1 is the minimum!')
}
else if(count == 10 && n == 1){
document.getElementById('item-counter').value = 10;
count = count;
alert('10 is max!')
}
else{
document.getElementById('item-counter').value = count + n;
count = count + n;
}
editSpace = [];
for(i=0; i<count; i++){
y = i + 1;
editSpace[i] =
'<div class="edit-item">\n'+
' <h3>name</h3>\n'+
' <input type="text" class="item-name" value="item '+y+'">\n'+
' <h3>url</h3>\n'+
' <input type="text" class="item-url" value="#">\n'+
' <h3>sub menu</h3>\n'+
' <input type="checkbox" id="sub-'+y+'">\n'+
'</div>';
}
document.getElementById('edit-catcher').innerHTML = editSpace.join('');
editButtons();
}
function editButtons(){
count = document.getElementById('item-counter').value;
count = parseInt(count);
editButton = [];
name = document.querySelectorAll('.item-name');
for(i=0; i<count; i++){
nameV = name[i].value;
editButton[i] = '<div class="edit-button">'+nameV+'</div>';
}
document.getElementById('item-wrap').innerHTML = editButton.join('');
check = document.querySelectorAll('.menu-item-content')[0];
check.style.maxHeight = check.scrollHeight+'px';
}
//]]>
</script>
</body>
</html>
[size=xsmall]
Toevoeging op 20/05/2019 20:46:11: [/size]
Ik heb het ineens gevonden!
Ik heb een variabele naam 'name' gebruikt en dat is een gereserveerde naam in javascript.
Zo leer ik toch weer van mijn eigen foutjes.
Link gekopieerd
