how do I pass a variable to a javascript function?

I have this function that works correctly. the problem is when I want to pass "myObj [x] .tipologia" to the "Abilita" function says that"myObj is not defined".

function showTipo(str){
  var i=0;
$("#demo").remove();
;
    var obj, dbParam, xmlhttp, myObj, x,t,txt = "";
    var prova;
   // obj = { "table":sel, "limit":20 };
   // dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200) {

         $("#secondo").before("<center><div id='demo' class='w3-row-padding w3-padding-64 w3-container'> </div></center>");
           myObj = JSON.parse(this.responseText);
          $("#demo").prepend("<div>  <table border='1' width='75%'> <tr><th width='25%'>Tipologia</th><th width='25%'>Abilitata</th><th width='25%'>Azioni</th></tr></table><table border='1' id='tab' width='75%'></div> ");


            for (x in myObj) {
            i=i+1;
            if(myObj[x].tipologia_abilitata != "2"){


               if(myObj[x].tipologia_abilitata == "1")
            {
              myObj[x].tipologia_abilitata = "ABILITATO";

            }
            else
            {
              myObj[x].tipologia_abilitata  = "DISABILITATO ";
            }
            prova=myObj[x].tipologia;                                                                                                                                                                                                                                    


             document.getElementById("tab").innerHTML+="<tr><td width='25%' id='cln'>" + myObj[x].tipologia + "</td> <td  width='25%'> "+myObj[x].tipologia_abilitata + "</td> <td width='25%'><button  onClick=Abilita(myObj[x].tipologia)>Abilita </button><button>disabilita</button></td></tr> "; 




           }}


            document.getElementById("tab").innerHTML += "</table>";





           }
$("#tab").after(" <br> <br><button   class:'w3-button' onClick=AddTipologia()> Aggiungi Tipologia </button>    <button onClick=ModificaTipologia()>Modifica</button>");
    };
    xmlhttp.open("POST", "VisualizzaCategorie.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("Nome_ente=" + str);
}

the offending line is:

document.getElementById("tab").innerHTML+="<tr><td width='25%' id='cln'>" + myObj[x].tipologia + "</td> <td  width='25%'> "+myObj[x].tipologia_abilitata + "</td> <td width='25%'><button  onClick=Abilita(myObj[x].tipologia)>Abilita </button><button>disabilita</button></td></tr> "; 

I can not understand why you could help me?

can it be that there is a quotation error in the onclick?

1 answer

  • answered 2018-06-24 20:49 CertainPerformance

    For onclick attributes to work, the functions and parameters they reference all need to be global. But the x is not global in your case.

    Inline handlers are terrible practice anyway - they result in hard-to-manage code, such as here. Attach the handler properly using Javascript instead, and it should work fine:

    const tr = document.getElementById("tab").insertRow();
    tr.outerHTML = "<tr><td width='25%' id='cln'>" + myObj[x].tipologia + "</td> <td  width='25%'> "+myObj[x].tipologia_abilitata + "</td> <td width='25%'><button>Abilita </button><button>disabilita</button></td></tr>"; 
    tr.querySelector('button').onclick = () => Abilita(myObj[x].tipologia);
    

    Note that you won't be able to assign to innerHTML of the container and retain handlers inside it - instead, use methods that explicitly create and append elements, such as document.createElement and appendChild.