События и обработчики JavaScript

Question

Я пишу код, в котором я хочу отображать слово и предложение на моей веб-странице при нажатии (кнопке). Пока у меня есть один текст, отображаемый на странице. Я хочу отобразить предложение после текста. Предложение не отображается ... кто-нибудь знает почему?

function handleButtonClick(){ 

    var button = document.getElementById("addButton"); 
    button.onclick = handleButtonClick; 


    var textInput = document.getElementById("word"); 
    var termName = textInput.value; 

    var dt = document.createElement("dt"); 
    dt.innerHTML = termName; 

    var dl = document.getElementById("p"); 

    dl.appendChild(dt); 


    var textInput = document.getElementById("sentence"); 
    var termDefine = textInput.value; 

    var dd = document.createElement("dd"); 
    dd.innerHTML = termDefine; 

    var dl = document.getElementById("define"); 

    dl.appendChild(d); 


} 
window.onload = handleButtonClick; 

Answer 1

В дополнение к тому, что уже было сказано @sushanth есть опечатка в коде:

Вместо

dl.appendChild(d); 

Это должно быть

dl.appendChild(dd); 

Answer 2

button.onclick = handleButtonClick; 

должен быть

button.addEventListener('click', handleButtonClick); 

Второй момент заключается в том, что обработчик события нажатия должны быть связаны вне области видимости функции. В противном случае каждое событие будет связано каждый раз, когда срабатывает функция handleButtonClick.

var button = document.getElementById("addButton"); 
button.addEventListener('click', handleButtonClick); 

function handleButtonClick() { 
    // Your other code here 
    // that excludes the click handler 
} 

И инструменты разработчика - ваш друг. Всегда используйте его для проверки на наличие ошибок.