How to remove the undefined thing?

Joined
Dec 14, 2021
Messages
28
Reaction score
2
I have this code, it should work well, but it doesn't and I can't find out why. I also should mention that this does use the prismjs library. I customized it to let my created HTML element of codeform to be used like the pre element in the library.

JavaScript:
function codeform123() {
    var cod = document.querySelectorAll("codeform");
    for (let i=0; i < cod.length; i++) {
        var type = cod[i].getAttribute("type");
        var content = cod[i].innerHTML.split(/\n/||/\r/||/\n\r/||/\r\n/);
        cod[i].innerHTML = "";
        for (let ii=0; ii < content.length; ii++) {
            if (content != "") {
                var thisLine = content[ii].split("");
                const splited = [];
                var splitedNum = 0;
                var sa = 0;
                var sb = 1;
                var back = 0;
                var iii;
                for (iii=0; iii<thisLine.length; iii++) {
                    if (thisLine[iii] == "undefined" || thisLine[iii] == undefined || thisLine[iii] == null) {continue;}
                    if (thisLine[iii] == " " && thisLine[iii+1] == " " && back == 0) {
                        splited[sa+splitedNum] += thisLine[iii];
                    } else {
                        if (thisLine[iii] != " " || thisLine[iii+1] != " ") {
                            back = 1;
                            if (iii==0) {
                                sa=1;
                                sb=0;
                            }
                            splited[sb+splitedNum] += thisLine[iii];
                        } else {
                            splitedNum+=2;
                            splited[sa+splitedNum] += thisLine[iii];
                            back = 0;
                        }
                    }
                }
                for (iii=0; iii<splited.length; iii++) {
                    if (splited[iii].includes("  ")) {
                        cod[i].innerHTML += splited[iii];
                    } else {
                        var code = document.createElement("code");
                        code.classList = "language-"+type;
                        code.innerHTML = splited[iii];
                        cod[i].appendChild(code);
                    }
                }
                if (ii != (content.length-1)) {cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";}
            } else {
                if (ii != (content.length-1)) {cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";}
            }
        }
    }
}
codeform123();

HTML:
<codeform type="css">#test {
  width: 1px;
  height: 1px;
}</codeform>

CSS:
codeform {
    display: block;
    color: #f8f8f2;
    background: #272822;
    margin: 1em 0;
    padding: 4px;
    border-radius: 8px;
    
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    
    text-align: left;
    
    white-space: pre;
    
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

When I run the code I get this:
CSS:
undefined#test {
undefined  undefinedwidth: 1px;
undefined  undefinedheight: 1px;
undefined}

However, I should be getting this:
CSS:
#test {
  width: 1px;
  height: 1px;
}

How do I get work the way that I want? As I don't understand where the undefineds come from. I do believe that the problem is when the strings are reconstructed into the array splited. As I have looked at the thisLine array and have seen that there are no undefineds, so where do they come from?
 
Joined
Mar 11, 2022
Messages
227
Reaction score
32
Okay. First of all. This forum has no section for any Open Source Library like JQuery or prismjs. I really apreciate that. One of the reasons why i've joined in.

I don't use prismjs or any other crap. But your code is messed up anyway.
If you need to do this:
Code:
if (thisLine[iii] == "undefined" || thisLine[iii] == undefined || thisLine[iii] == null) {continue;}

Than you really should take a break.

Back to your problem. Because i really don't get it.

Delete all the JS and you'll have your "Blackbox" with
Code:
#test {
width: 1px;
height: 1px;
}
inside. Because it's already given.

If you want #test to come a style class dynamically than you should go with something like this:
Code:
function addStyle(styletr){
    var css = styletr;
var style = document.createElement('style');
    if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);
return style;
    }
var style='#test{width:1px; height:1px;}';
addStyle(style);

What's the "return" for you ask??
Well. CSS classes fill up your cache. Unneeded CSS Classes should be killed after using (burn notice after reading, CIA know that for decades)

So
Code:
var style='#test{width:1px; height:1px;}';
var addit = addStyle(style);
//do something 
//when done or not longer needed
if(addit.parentNode){
   addit.parentNode.removeChild(addit);
    }else{
        addit.remove();
        }
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,818
Messages
2,569,736
Members
45,708
Latest member
RenaldoFor

Latest Threads

Top