Value is undefined
Ik probeer de value te krijgen van een eerder gegenereerd input element.
Echter krijg ik continu 'undefined' retour.
Ik gebruik de volgende code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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();
}
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('');
}
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();
}
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('');
}
Wat gaat hier fout?
Of is het niet mogelijk op deze manier de value te achterhalen?
Gewijzigd op 20/05/2019 12:05:27 door Fester Splinter
- mySecondFunction() mist het keyword function
- in principe hoeven er geen [rechte haken] om [i] te staan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- 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>
<!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>
Gewijzigd op 20/05/2019 16:11:25 door Thomas van den Heuvel
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!-- 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>
<!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>
Toevoeging op 20/05/2019 20:46:11:
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.
Gewijzigd op 20/05/2019 20:39:39 door Fester Splinter