博客使用BBcode展示内容时遇Uncaught TypeError错误求助

开发者阿泽

2026-5-15

Fixing "Uncaught TypeError: Cannot read property 'src' of undefined" in BBcode Blog Rendering

Hey there, let's break down why you're hitting that TypeError and how to fix it. The error is telling you that you're trying to access the src property of an undefined value—this happens when you try to grab an image from the s array (your collection of <img> elements) that doesn't actually exist in the content.

Key Issues in Your Code

Unchecked Image Array Access: You check if s.length >= 1 before using s[0].src for the main image, but later in the product detail block, you directly access s[1] through s[5] without any checks. If your content has fewer than 6 images, those indices will be undefined, and accessing .src will throw the error.
Redundant Variable Declarations: You declare the news variable twice, which can lead to unexpected behavior and scoping issues.

Step-by-Step Fixes

1. Safeguard All Image Array Access

Wrap every access to s[index].src with a check to confirm the image exists. Use a fallback image URL (replace with your own placeholder) if the image is missing.

For example, instead of:

'<img class="img-cc opaque" src="' + s[0].src + '"/>'

Use:

'<img class="img-cc opaque" src="' + (s[0] ? s[0].src : 'placeholder-image.jpg') + '"/>'

Repeat this pattern for s[1] through s[5] in the carousel section.

2. Clean Up Redundant Variables

Combine the two news declarations into a single line to avoid confusion:

var news = -1 != e.innerHTML.indexOf("[news]") 
  ? e.innerHTML.substring(e.innerHTML.indexOf("[news]") + 6, e.innerHTML.indexOf("[/news]")) 
  : (-1 != e.innerHTML.indexOf("[hot]") 
    ? e.innerHTML.substring(e.innerHTML.indexOf("[hot]") + 5, e.innerHTML.indexOf("[/hot]")) 
    : "");

3. Full Fixed Code

Here's the updated detailsp function with all safeguards in place:

function detailsp(e, t, n) { 
    var r = e.substring(7); 
    e = document.getElementById(e); 
    var i = "" , s = e.getElementsByTagName("img");  
    // Safeguard initial image
    1 <= s.length && (i = '<img src="' + (s[0] ? s[0].src : 'placeholder-image.jpg') + '"/>'); 

    var oldprice = e.innerHTML.substring(e.innerHTML.indexOf("[oldprice]") + 10, e.innerHTML.indexOf("[/oldprice]")) , 
        u = e.innerHTML.substring(e.innerHTML.indexOf("[price]") + 7, e.innerHTML.indexOf("[/price]")); 
    pricevalue = oldprice.replace(/,/gi, ""); 
    priceprvalue = u.replace(/,/gi, ""); 
    u = " " + u + ""; 

    if (-1 != e.innerHTML.indexOf("[oldprice]")) {
        var h = "Giá gốc: ", 
            oldprice = "Old Price : " + oldprice + "", 
            p = ((parseInt(priceprvalue) - parseInt(pricevalue)) / parseInt(priceprvalue) * 100).toFixed(0) + "%"; 
    } else {
        oldprice = h = "", 
        p = "0%"; 
    }

    var o = e.innerHTML.substring(e.innerHTML.indexOf("[brief]") + 7, e.innerHTML.indexOf("[/brief]")); 
    var detail = e.innerHTML.substring(e.innerHTML.indexOf("[detail]") + 8, e.innerHTML.indexOf("[/detail]")); 
    var hotdeal = e.innerHTML.substring(e.innerHTML.indexOf("[hot]") + 5, e.innerHTML.indexOf("[/hot]")); 
    // Combined news variable declaration
    var news = -1 != e.innerHTML.indexOf("[news]") 
      ? e.innerHTML.substring(e.innerHTML.indexOf("[news]") + 6, e.innerHTML.indexOf("[/news]")) 
      : (-1 != e.innerHTML.indexOf("[hot]") 
        ? e.innerHTML.substring(e.innerHTML.indexOf("[hot]") + 5, e.innerHTML.indexOf("[/hot]")) 
        : ""); 
    var technology = -1 != e.innerHTML.indexOf("[technology]") ? e.innerHTML.substring(e.innerHTML.indexOf("[technology]") + 12, e.innerHTML.indexOf("[/technology]")) : ""; 
    var rating = -1 != e.innerHTML.indexOf("[rating]") ? e.innerHTML.substring(e.innerHTML.indexOf("[rating]") + 8, e.innerHTML.indexOf("[/rating]")) : "Updating"; 
    var desc = -1 != e.innerHTML.indexOf("[desc]") ? e.innerHTML.substring(e.innerHTML.indexOf("[desc]") + 6, e.innerHTML.indexOf("[/desc]")) : "No description"; 
    var video = -1 != e.innerHTML.indexOf("[video]") ? e.innerHTML.substring(e.innerHTML.indexOf("[video]") + 7, e.innerHTML.indexOf("[/video]")) : "Updating"; 
    var image = -1 != e.innerHTML.indexOf("[desc]") ? e.innerHTML.substring(e.innerHTML.indexOf("[image]") + 9, e.innerHTML.indexOf("[/image]")) : "No Image"; 

    e.innerHTML = -1 != e.innerHTML.indexOf("[news]") ? 
        '<div id="content" class="col_left"> <div class="top"> <div class="left"></div><div class="right"></div><div class="center"> <h1>' + t + '</h1> </div></div><div class="detail-new">'+ news + '</div></div>' : 
        '<div class="prodetail-block clearfix simpleCart_shelfItem"><div class="col-1 float-l"><div class="image-prod"><div id="firstProductView"><div id="zoomer">'+hotdeal+'<a><img class="img-cc opaque" src="' + (s[0] ? s[0].src : 'placeholder-image.jpg') + '"/></a></div><div class="ca-container" id="ca-container"><div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div><div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div><div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div><div class="ca-wrapper" style="overflow: hidden;"><div class="ca-item ca-item-1" style="left: 0px; position: absolute;"><img alt="20150627161501_mini-pc-cs918-android-tv-box-rockchip-rk3188-quad-core-02.jpg"src="' + (s[1] ? s[1].src : 'placeholder-image.jpg') + '"/></div><div class="ca-item ca-item-1" style="left: 100px; position: absolute;"><img alt="20150627161501_mini-pc-cs918-android-tv-box-rockchip-rk3188-quad-core-02.jpg"src="' + (s[2] ? s[2].src : 'placeholder-image.jpg') + '"/></div><div class="ca-item ca-item-1" style="left:200px; position: absolute;"><img alt="20150627161501_mini-pc-cs918-android-tv-box-rockchip-rk3188-quad-core-02.jpg"src="' + (s[3] ? s[3].src : 'placeholder-image.jpg') + '"/></div><div class="ca-item ca-item-1" style="left: 300px; position: absolute;"><img alt="20150627161501_mini-pc-cs918-android-tv-box-rockchip-rk3188-quad-core-02.jpg"src="' + (s[4] ? s[4].src : 'placeholder-image.jpg') + '"/></div><div class="ca-item ca-item-1" style="left: 400px; position: absolute;"><img alt="20150627161501_mini-pc-cs918-android-tv-box-rockchip-rk3188-quad-core-06.jpg"src="' + (s[5] ? s[5].src : 'placeholder-image.jpg') + '"/></div></div></div></div></div></div><div class="col-2"><h1 class="title item_name" itemprop="name">' + t + '</h1><div class="prd-blk"><div class="prd-box clearfix"><div itemprop="offers" style="display: none;"></div><div class="pr-price-box "><div class="pr-new item_price">' + u +' </div><div class="pr-old">' + oldprice + '</div></div></div><div class="prd-order clearfix"><a class="item_add prd-order-bt buy-now iframe hvr-sweep-to-right" href="'+urlmuangay+'"><i class="fa fa-money" aria-hidden="true"></i>BUY NOW</a><a title="" target="_blank" href="javascript:void(0);" class="item_add prd-order-bt buy-now hvr-sweep-to-right" rel="' + r + '"><i class="fa fa-shopping-cart"></i> ADD TO CART</a><a class="product__howToBuy" href="#" target="_blank" ><i class="icn-howtobuy"></i><span class="txt-howtobuy"></span></a></div> </div><div class="sale-box"><h3 class="sale-b-ttl active" rel_data="khuyenmai"><i class="fa fa-gift"></i> Sales</h3><div class="sale-b-ct">' + o + '</div></div><div class="like-plus"> <div class="addthis_native_toolbox"></div></div></div></div> </div></div><section class="tabct-prod l-tab"><ul class="nav-tabs clearfix"> <li><a href="#tabnv-1" class="selected"><i class="fa fa-leaf"></i> Details<span>&nbsp;</span></a></li><li><a href="#tabnv-2" class=""><i class="fa fa-credit-card-alt" aria-hidden="true"></i> Quotations<span>&nbsp;</span></a></li><li><a href="#tabnv-4" class=""><i class="fa fa-file-image-o"></i> Images<span>&nbsp;</span></a></li><li><a href="#tabnv-7" class=""><i class="fa fa-star" aria-hidden="true"></i> Rating<span>&nbsp;</span></a></li></ul><div class="tab-content"><div class="tab-pane" id="tabnv-1" >' + detail + '</div><div class="tab-pane" id="tabnv-2" style="display: none;">' + technology + '</div><div class="tab-pane" id="tabnv-4" style="display: none;">'+video+'</div><div class="tab-pane" id="tabnv-7" style="display: none;">'+rating+'</div>'; 
}

Extra Recommendations

Replace 'placeholder-image.jpg' with a real URL to a fallback image that matches your blog's design.
Add checks for missing BBcode tags (like [oldprice] or [brief]) to avoid substring errors if those tags aren't present in the content.
Consider switching from var to let/const for better variable scoping (if you don't need to support very old browsers).

内容的提问来源于stack exchange，提问作者Hoang Nguyen