Onclick 事件无法生成新标题

Question

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

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

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

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>

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

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

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

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

Onclick 事件无法生成新标题

Onclick event not working to generate new title

html

javascript

arrays

function

getelementsbyclassname