Onclick 事件无法生成新标题

Question

我正在创建一个文本生成器。我正在尝试在 JavaScript 中编写一个函数，当单击下拉菜单中的选项时，将保存与该选项对应的文本，当单击“生成”按钮时，该保存的文本将显示为页面的标题。

问题：当我单击“生成”按钮时，错误的文本显示为标题。此外，当我想选择不同的选项时，标题永远不会改变。我该如何解决这个问题？

到目前为止我尝试过的是：

var x;
var y;

function format1Select(){
    x = document.getElementsByClassName("formats")[0];
    y = document.getElementsByClassName("nav")[0];
    y.innerHTML = x.innerHTML + " +";
} //to select choice 1

function format2Select(){
    x = document.getElementsByClassName("formats")[1];
    y = document.getElementsByClassName("nav")[0];
    y.innerHTML = x.innerHTML + " +";
} //to select choice 2

function format3Select(){
    x = document.getElementsByClassName("formats")[2];
    y = document.getElementsByClassName("nav")[0];
    y.innerHTML = x.innerHTML + " +";
} // to select choice 3

function generate() {
    if (x = document.getElementsByClassName("formats")[0]) {
        x != document.getElementsByClassName("formats")[1];
        x != document.getElementsByClassName("formats")[2];
       format1 = "I am";
        i = document.getElementsByTagName("h1")[0];
        i.innerHTML = format1;
    } else if (x = document.getElementsByClassName("formats")[1]) {
        x != document.getElementsByClassName("formats")[0];
        x != document.getElementsByClassName("formats")[2];
       format2 = "I believe";
       i = document.getElementsByTagName("h1")[0];
       i.innerHTML = format2;
    } else {
       x != document.getElementsByClassName("formats")[0];
       x != document.getElementsByClassName("formats")[1];
       format3 = "I will";
       i = document.getElementsByTagName("h1")[0];
       i.innerHTML = format3;
    }
}

我使用的 HTML：

    <div class="show"><div class="nav"> Choose Format +</div></div>
    <div class="hide">
 
    <div class="formats" onclick="format1Select()">I am...</div>
    <div class="formats" onclick="format2Select()">I believe...</div>
    <div class="formats" onclick="format3Select()">I will...</div>
</div>

</div> <br>
<div id="opt">
    <div class="options" onclick="generate()">Generate</div>
    <div class="options"><a href="">Survey</a></div>
</div>

Answer 1

这是一个更优雅的解决方案，消除了一些代码重复，并且更易于阅读。

它还可以更轻松地将选项添加到您拥有的下拉列表中，因为您只需在 HTML 中的列表中添加另一个元素

//Here we get an array of the format elements (well its actually an HTMLCollection, but that's unimportant here)
let formats = document.getElementsByClassName('formats');

//This is a variable that will let us store the currently selected format
let selectedFormat = '';

//We loop through all the format elements and add an 'onclick' event handler
for (let format of formats) {
    format.onclick = (event) => {
        //We grab the formats text from the HTML itself to set the variable
        selectedFormat = event.target.innerText;
    };
}

//This adds an event to the generate button to actually change the title when clicked
document.getElementsByClassName('options')[0].onclick = () => {
    let el = document.getElementsByTagName('h1')[0];
    el.innerHTML = selectedFormat;
};

另外，你的 HTML 使用这个 JavaScript 不需要直接在 onclick 属性中调用 JS，你可以在上面的 JS 循环中这样做（然后你不必编写一个全新的函数来添加一些东西到列表中）

    <div class="show"><div class="nav"> Choose Format +</div></div>
    <div class="hide">
 
    <div class="formats">I am...</div>
    <div class="formats">I believe...</div>
    <div class="formats">I will...</div>

另一个选项，如果您希望标题中的值与菜单的实际文本不同，您可以使用这样的数据属性：

<div class="formats" data-format="I am!">I am...</div>

然后在循环中，您可以使用它来将值设置为不同于菜单中的值

let selectedFormat = '';
//...
    selectedFormat = event.target.dataset.format;
//...