سؤال

أحاول ملء قائمة الصور بشكل ديناميكي باستخدام جافا سكريبت. لدي التعليمات البرمجية التالية، لكنها لا تعمل. إذا رأيت أي أخطاء، أو تعرف طريقة أفضل للقيام بذلك، فسيتم تقدير أي مساعدة.

الرمز هو كما يلي:

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

<head>
<script type="text/javascript">
function generateCarousel(baseval, num_images)
{
    var list_node = document.getElementById("carousel");
    list_node.innerHtml(''); // clear the previous contents

    for (var i = 0; i < num_images; i++)
    {
        var img = document.createElement("img");
        img.src = baseval + ((i<9)?0+i:i) + ".jpg"; 
        list_node.appendChild(img);
    }
}
</script>
<style type="text/css">
#carousel {
    width: 700px;
    height: 450px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
</style>

</head>


<body>

<div id="Container">



<div id="Content">

 <div id="carousel">            
  <img src="images/placeholder0.jpg" height="450" />
  <img src="images/placeholder1.jpg" height="450" />
 </div>

<a onclick="generateCarousel('images/set1/', 10); return false;">set 1</a>

<a onclick="generateCarousel('images/set2/', 12); return false;">set 2</a>
  </div>

</div>

</body>

</html>
هل كانت مفيدة؟

المحلول

"Innerhtml" ليست وظيفة.

list_node.innerHTML = '';

نصائح أخرى

list_node.innerHtml('');

Innerhtml هو خاصية، وليس وظيفة؛ و Innerhtml غير موجود، ما لم يكن هناك شيء تستخدمه هو تحديده. كان معظم وحدة تحكم JavaScript معظم المتصفحات قد تنبهك إلى هذا.

عادة، يتوقف تنفيذ البرنامج النصي عند حدوث استثناء غير مصراعي. لذلك توقف البرنامج النصي هناك.

كما نوقشت من قبل الآخر، تحتاج إلى تغيير السطر حيث قمت بتعيين HTML Inner ل

`list_node.innerHTML = '';`

وإذ تلاحظ أنها سمة، وليس وظيفة، وهذه الحالة يهم.

أيضا، قد ترغب في إضافة ما يلي إلى CSS للحصول على جميع الصور لملء ارتفاع دائري تلقائيا.

#carousel img { height: 100%; }
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top