未捕获的 ReferenceError：“a”未在 HTMLButtonElement.onclick 中定义（gallery.html:1）

Question

When I create a new div element, I want the button to perform an onClick event that will capture the ${Title} variable. Then the getTitle(Title) function will take ${Title} as a parameter and use module.exports so that I can use this variable in another javascript file. (the way I use module.exports is through browserify.)

function createDiv(Title){
    var div = document.createElement('div');
    div.setAttribute('class', `column-photo ${Type} show`);

    var newDiv =
        `
            <div class="content">
            <button class="content-text" id="Btn" onClick="getTitle(${Title})">
            </button>
            </div>
            `;

    div.innerHTML = newDiv;
    document.getElementById('someID').prepend(div);

}

function getTitle(Title){
    var imageTitle = Title.value;
    module.exports = imageTitle;
    console.log(imageTitle);
}

However, the problem here is that it throws an error when I click the button: (${Title} = 'a' and filename is gallery.html)

Uncaught ReferenceError: 'a' is not defined
    at HTMLButtonElement.onclick (gallery.html:1)

The other javascript file will import this variable. However, console.log(imageTitle.imageTitle) is undefined. How do I fix this?

var imageTitle = require('./file.js');
console.log(imageTitle.imageTitle);

Answer 1

When constructing the HTML element, you need to properly inject the function parameter. The error lays in this line:

onClick="getTitle(${Title})"

if the Title is "a" , then after building the string, it becomes:

onClick="getTitle(a)"

which produces this error because a is not defined anywhere.

To fix this, change the line to this one:

onClick="getTitle('${Title}')"

which will be properly resolved to:

onClick="getTitle('a')"