为什么我的按钮不调用html中的函数？

Question

这里的初学者，我试着做一个按钮显示，可以显示额外的信息。为此，我尝试将信息设置为display: none；然后将其设置为display: inline；通过使用按钮调用函数。

但是，我的按钮似乎无法调用所需的函数，因为即使在尝试控制台记录这些函数之后，它们也不会响应。

这是所有大括号的代码。{{}是anki标签：

<style>
.card {
  font-family: Comic Sans MS; //Kid font
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

li {
    text-align:left;
    display:none;

}

button{
    display:block;
    width:28%;
    padding:auto;
    margin:auto;
}

.mono{ 
    font-family:"Courier New";
    font-size: 1.18em; 

    font-weight:bold;


    width:50%;
    margin: auto;
}


.etymology {
    margin:auto;
    margin: 0 0 1em 0;
    display:none;

}

.info{

    margin: 0 0 1em 0;
    display:none;


}
</style>

{{FrontSide}} // all tags with braces are anki tags

<hr id=answer>

<h2>{{def}}</h2>

<button onlclick="synonyms()"> Common Syn.</button>

<ul>
    <li>{{c1}}, </li><li>{{c2}}, </li><li>{{c3}}, </li><li>{{c4}}, </li><li>{{c5}}</li>
</ul>


<div class="mono"> 

    <div class="smol_details">

        <div class="etymology">{{etymology}}<br> "{{source_language}}"</div> 
        <button onlclick="etymology()">Language info </button>

        <div class="info">{{usage_cat}} {{recognition}} {{book}} <br>{{commentary}}</div>
        <button onlclick="data()"> data data</button>

    </div>

</div>


<script>
    function synonyms() {
    document.querySelectorAll("li").style.display = "inline";
    
    console.log("cliced");
} 

    function etymology() {
    document.querySelectorAll(".etymology").style.display = "inline";
console.log("cliced");
} 

    function data() {
    document.querySelectorAll(".info").style.display = "inline";
console.log("cliced");
} 

</script>

我需要

当单击与

• 、.etymology和.data相关的按钮时，它们是可见的。任何帮助都非常感谢

Answer 1

您拼错了onclick更改onlclick为onclick