کلیدستان

نسخه‌ی کامل: مشکل با DOM JS (برنامه نویسی javascript)
شما در حال مشاهده نسخه آرشیو هستید. برای مشاهده نسخه کامل کلیک کنید.
سلام من میخام یه ویرایشگر متن برای برنامه ام درست کنم با اسنفاده از تگ های html ولی این کد جاوا اسکربپت که قراره تگ ها رو به اخر فایل html ام append کنه کار نمی کنه لطفا ببنید مشکل اش چیه

کد پی‌اچ‌پی:
<html>
<
head>
 <
meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <
script language="JavaScript" >
    var 
mainDiv document.getElementById('mainDiv');
    function 
appendTag(action,tagName,id,text,align){
        if(
action=="createElement"){
            switch(
tagName){
                case 
"b":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
                case 
"i":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
                 case 
"u":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
                case 
"p":
                    if(
align == "center"){
                        var 
newTag document.createElement(tagName);
                        
newTag.setAttribute('id',id);
                        
newTag.setAttribute("align","center");
                        
newTag.innerHTML "";
                        
mainDiv.appendChild(newTag);
                    }
                    if(
align == "left"){
                        var 
newTag document.createElement(tagName);
                        
newTag.setAttribute('id',id);
                        
newTag.setAttribute("align","left");
                        
newTag.innerHTML "";
                        
mainDiv.appendChild(newTag);
                    }
                    if(
align == "right"){
                        var 
newTag document.createElement(tagName);
                        
newTag.setAttribute('id',id);
                        
newTag.setAttribute("align","right");
                        
newTag.innerHTML "";
                        
mainDiv.appendChild(newTag);
                    }
                    if(
align == "justify"){
                        var 
newTag document.createElement(tagName);
                        
newTag.setAttribute('id',id);
                        
newTag.setAttribute("align","justify");
                        
newTag.innerHTML "";
                        
mainDiv.appendChild(newTag);
                    }
                break;
                case 
"h1":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
                case 
"h2":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
                case 
"h3":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
                case 
"h4":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
                case 
"h5":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
                case 
"h6":
                    var 
newTag document.createElement(tagName);
                    
newTag.setAttribute('id',id);
                    
newTag.innerHTML "";
                    
mainDiv.appendChild(newTag);
                break;
            }
        }
        if(
action=="innerHTML"){
            
id.innerHTML=id.innerHTML+text
            
//document.getElementById(id).innerHTML=document.getElementById(id).innerHTML+ text;
        
}
    }
 
</script>
</head>
<body >
 <div id="mainDiv">
     <input type="button" onclick="appendTag('createElement','b','d1','','');" value="add tag"/>
     <input type="button" onclick="appendTag('innerHTML','','d1','yes','');" value="make text"/>

 </div>
</body>
</html> 
سلام.
بنده فرصت نمی کنم کدها را بررسی کنم، اما خیلی مواقع که ما یک سری کد javascript داریم و آنها را در صفحه اجرا می کنیم و نتیجه مورد نظرمان حاصل نمی شود، به این دلیل است که در آن کدها از روش های موجود در کتابخانه jquery استفاده شده است. بنابراین تا زمانی که ارجاع به فایل کتابخانه jquery را در کدهای HTML صفحه ذکر نکنیم، کدهای javascript به درستی اجرا نمی شوند.
بنابراین بد نیست که این مورد را بررسی نمایید.
در مورد jquery (و چگونگی ارجاع به آن)، دسته کلید (دسته بندی) زیر را مشاهده کنید :

دسته کلید (دسته بندی) شماره 290

مشکل ام حل شد کد برای بقیه
کد پی‌اچ‌پی:
<html>
<
head>
 <
meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <
script type="text/javascript">                       
          
     function 
make(elemcontent) {
        var 
enode document.createElement(elem);          // li, p, div        
        
var tnode document.createTextNode(content);      // content of the node
        
enode.appendChild(tnode);                          // write content in element
      
        
return enode;          
     }
     
     function 
bake(insertNodeelemcontentattributes) {
         var 
newElem make(elemcontent);
         
         if (
attributes !== false && typeof attributes !== 'undefined') {
             for (
prop in attributes) {
                 
                 
// prevent double IDs
                 
if (prop === 'id' && document.getElementById(attributes[prop]) !== null)
                     continue;
                     
                  
newElem.setAttribute(prop,attributes[prop]);
             }
         }
         
document.getElementById(insertNode).appendChild(newElem);         
     }
     
     function 
change(idcontent) {
         
document.getElementById(id).textContent content;
     }
     
     function 
changeHTML(idcontent) {
         
document.getElementById(id).innerHTML content;
     }
 
</script>
</head>
<body >
 
    <input type="button" onclick="bake('content', 'p', 'Hai im an paragraph!')" value="make p"/>
    <input type="button" onclick="bake('content', 'div', 'Hai! im an div')" value="make div"/>
    <input type="button" onclick="bake('content', 'p', 'Hai! im an right algined paragraph!', {align: 'right'})" value="make p right"/>
    <input type="button" onclick="bake('content', 'p', 'Im a node with an ID', {id: 'myID'})" value="make #myID"/>
    <input type="button" onclick="change('myID', 'Uh... i changed')" value="Change #myID"/>
    <input type="button" onclick="changeHTML('myID', '<ul><li>Be aware that this list isnt touchable with JavaScript</li><li>when you do it that way</li></ul>')" value="ChangeHTML #myID"/>
    
 <div id="content">
 </div>
    
</body>
</html>