unexpected number hatası
<script type="text/javascript">
document.querySelector('#add-item').addEventListener('click', function()
{
document.querySelector('#orderTable tbody').innerHTML += `
<tr>
<td>
<select asp-items="@Model.Products" asp-for="@Model.OrderDetail.ProductId" class="form-select">
@{
if (Model.Products.Count > 0)
{
<option>Lütfen ürün seçiniz</option>
@foreach (var item in Model.Products)
{
<option value="@item.Value">@item.Text</option>
}
}
else
{
<option>Hiçbir ürün yok</option>
}
}
</select>
</td>
<td>
<div class="m-0">
<input asp-for="@Model.OrderDetail.Quantity" class="form-control" value="" />
</div>
</td>
<td>
<button type="button" class="btn btn-outline-danger" id="btn_remove">
Öğeyi Sil
</button>
</td>
</tr>
`;
});
document.querySelector('#btn_remove').addEventListener('click', function(){
var row = document.querySelector("#orderTable").rows.length - 1;
document.querySelector('#orderTable tbody').removeChild();
});
</script>
Öncelikle, lütfen soru hazırlarken biraz daha özenli olun.
Kısaca cevap: Hatanın alındığı satıra bakmak gerek.
Uzunca cevap:
Derlenmiş kod üzerinden yorum yapalım.
Model.Products.Count = 0
geldiğini varsayalım.
Bu durumda istemciye iletilen sayfa şu şekilde olur:
<script type="text/javascript">
document.querySelector('#add-item').addEventListener('click', function() {
document.querySelector('#orderTable tbody').innerHTML += `
<tr>
<td>
<select class="form-select" name="OrderDetail.ProductId">
<option>Hiçbir ürün yok</option>
</select>
</td>
<td>
<div class="m-0">
<input class="form-control" name="OrderDetail.Quantity" value="" />
</div>
</td>
<td>
<button type="button" class="btn btn-outline-danger" id="btn_remove">
Öğeyi Sil
</button>
</td>
</tr>
`;
});
document.querySelector('#btn_remove').addEventListener('click', function() {
var row = document.querySelector("#orderTable").rows.length - 1;
document.querySelector('#orderTable tbody').removeChild();
});
</script>
Burada unexpected number
hatasını verebilecek, number'larla işi olan gördüğüm kadarıyla sadece şu kod var:
var row = document.querySelector("#orderTable").rows.length - 1;
O halde document.querySelector("#orderTable").rows.length
kodu bir number dönmüyor demektir.
.length
kodu array'ler için mutlaka bir sayı döner.
O halde document.querySelector("#orderTable").rows
değeri bir array değil.
Normalde <table />
elementleri için .rows
kodu mutlaka bir array döner. Eğer seçici (document.querySelector("#orderTable")
), <table />
dışında bir element seçmiş olsaydı null
dönerdi ve null.rows
gibi bir komuta dönüşürdü. Bu da Uncaught TypeError: Cannot read properties of null (reading 'rows')
gibi bir hata fırlatırdı.
O halde document.querySelector("#orderTable")
kodu herhangi bir element dönmüyor. .querySelector()
fonksiyonu seçicisi ile bir element bulamazsa null
döner.
O halde unexpected number
hatası doğrudan değil, dolaylı bir nedenle ortaya çıkıyor.
Yani hatanın alındığı satıra bakmak gerekir. Hata burada oluşmuyor gibi görünüyor.
Kurgusal olarak hatanın nerede olabileceğini düşününce aklıma şu geliyor:
#btn_remove
id'li elemente click edildiğinde, DOM'da henüz bir #orderTable
id'li element yoktur. Yani henüz DOM'a basılmamıştır.
Bu durumda row
değişkeni NaN
(Not a Number) değeri alır. Başka bir satırda row değeri ile bir işlem yapılmak istenirse, doğrudan değil ama dolaylı olarak bir hatalar silsilesi oluşup unexpected number
hatasıyla karşılaşılabilir. Yani yine hatanın oluştuğu satıra, hatta varsa hatalar silsilesine bakmak gerek.
Bir diğer sorun da, #add-item
elementine her basılışta #orderTable tbody
elementi içine bir <tr />
elementi eklenmesiyle ilgili.
Çünkü eklenen her satırın içinde #btn_remove
id'li bir buton da ekleniyor. Ama bir id değeri sayfa içinde sadece 1 tane olur. Burada, eklenen her satırın içinde aynı id'ye sahip birer buton oluşmuş oluyor.
document.querySelector('#btn_remove')
ile seçim yapıldığında aslında her zaman ilk satırdaki buton seçilmiş oluyor.
Ama kodun paylaşılan kısmı için konuşursak, unexpected number
hatası doğrudan bu nedenle oluşmuyordur. Ama buna bağlı dolaylı bir nedenle oluşuyor olabilr. Yani yine hatanın oluştuğu satıra bakmak gerek.
Bir diğer sorun da, document.querySelector('#btn_remove')
seçicisi çalıştığı sırada henüz DOM'da #btn_remove
id'li bir element olmaması.
Yani aslında bu komut çalıştığı sırada DOM'da hiç #btn_remove
id'li element yoksa elementi seçmek mümkün değil. Böylece eklenen click olayı dinleyicisi de çalışmayacaktır. Hatta muhtemelen null.addEventListener(...)
gibi bir yorumlama yapılacağı için yine bir TypeError
alınıyordur. Ama tabi sayfada böyle bir element varsa o ayrı...
Tabi yine kodun paylaşılan kısmı için unexpected number
hatası doğrudan bu nedenle oluşmuyordur.
SyntaxError: Unexpected number
hatasıyla örneğin şöyle bir kodda karşılaşılır:
console.log(4 8 15 16 23 42);
Yani bu hata javascript'te syntax hatası varsa alınır. Yanlış bir operatör kullanımı veya number ve string arasına boşluk koymak gibi) olduğu durumlarda ortaya çıkar Kod yorumlanırken number beklenmeyen bir yerde number ile karşılaşılmasıyla bu hata fırlatılır.
Paylaştığın kodda syntax hatası oluşturacak bir yere rastlamadım. >>> Hatanın alındığı satıra bakmak gerek.