I can’t use javascript in my html

Question

I would like to connect a function to work with finite automata.

The intention is that from the forms I can work with her js:

var ListaNo = new function () {
    this.Nos;

    function CriaNo(idNo){
        var NovoNo = new No(idNo);
        this.Nos.push(NovoNo);
        return NovoNo;
    }

    function AdicionaLigacao(idNo, termo)
    {
        var aux = buscaNo(idNo);
        if (aux == null) aux = CriaNo(idNo);
        aux.AdcionaNo(termo);
    }   


    function verificaGr(chave, nAtual, i){
        if(i<chave.length)
        {       
            var cAtual = chave[i];
            nAtual.terminal.foreach(element, index =>{
                if(element == cAtual)
                {
                    var NovNo = buscaNo(nAtual.variavel[index])
                    var aux;
                    if (NovNo != null)  aux = verificaGr(chave, NovNo, i+1);
                    else if (NovNo == null && i == chave.length-1)
                    {
                        if(nAtual.variavel[index] == 'λ') return true;
                    }
                    if (aux == true) return true;
                }
                else if (element == 'λ')
                {
                    var NovNo = buscaNo(nAtual.variavel[index])
                    var aux;
                    if (NovNo != null)  aux = verificaGr(chave, NovNo, i);
                    if (aux == true) return true;
                }
                return false;   
            }); 
        }
        else if(i == chave.length)
        {
            nAtual.terminal.foreach(element, index =>{
                if (element == 'λ' && nAtual.variavel[index] == 'λ') return true;
            });
        }
        else return false;
    }

    function buscaNo(idNo)
    {
        if(idNo == 'λ') return null;
        this.Nos.foreach(element, index =>{
        if(element.id == idNo)
        {
            return Nos[index];
        }   
    });
    return null;    
    }

    function LimpaNos()
{
    this.Nos = [];
}

    return{
        ListaNo, LimpaNos, buscaNo, verificaGr, AdicionaLigacao
};
}

html:

<div class="cardGramatica">  
        <h4>Gramatica</h4>   

        <div class="Header" id="hd03">
            <form id="gramar">
                     Id
                    <input id="inputvar" maxlength="1"  style="width:5%" type="text" name="fname"><i class="fas fa-long-arrow-alt-right" style="font-size:15px; padding-left:5px"></i>
                    String
                    <input id="inputter" style="width:40%" type="text" name="fname">
                    <button type="button" style="width:100%" value="Adicionar" onclick="AdicionaLigacao(inputvar,inputter)" id="adicionar">Adicionar No</button>
            <br>
    </form>
        </div>
    </div>

Error: ![Uncaught Referenceerror: Additionlink is not defined At Htmlbuttonelement.onclick (index.html:59)]1

Answer 1

You are having that error because Function is within a variable.

Instead of calling the function in html by onclick you can try calling it after the variable with this.

document.getElementById('adicionar').onclick = function(){
    ListaNo.AdicionaLigacao('inputvar','inputter');
}

It’ll look like this https://jsfiddle.net/rfom0735/1/

Answer 2

Thanks for the answers, I was able to solve using Fabio’s method and an auxiliary js file to manipulate the functions.

Answer 3

There are several ways to do this, the most recommended way: First you need to select page elements in your script, fortunately the Web Apis provides this functionality natively with querySelector, follow the syntax:
element = document.querySelector(selectors);

In your case it would be:

$inputvar = document.querySelector("#inputvar");
$inputter = document.querySelector("#inputter");
$button = document.querySelector("button");

After that you should add the event to the button, again the Web Apis natively provides this functionality with addeventlistener, follows the syntax:
alvo.addEventListener(type,listener\[, options\]);

In your case it would be:

$botao.addEventListener('click', () => ListaNo.AdicionaLigacao($inputvar,$inputter));

If you added your script to the page as a module and really want to access the function from your HTML you just need to add Liston as a Property of the object window(window.ListaNo = ListaNo;), that had made the Liston visible in the global scope of the page. However, for the sake of good practice, it is highly recommended that you do it in the way previously recommended once it is always preferable to leave all logic in Javascript, just as it is preferable to leave all styling in CSS.