Onclick event not working to generate new title

Question

I'm creating a text generator. I am trying to write a function in JavaScript where when a choice in a drop down menu is clicked, the text corresponding to that choice is saved and when the "Generate" button is clicked, that saved text appears as the title of the page.

The problem: The wrong text appears as the title when I click the "Generate" button. Also, when I want to select a different choice, the title never changes. How do I fix this?

What I've tried so far is:

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;
    }
}

The HTML I used:

    <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

This is a more elegant solution that removes some code duplication, and is a little bit easier to read.

It also makes it easier to add options to the dropdown list you have because you only have to add another element to your list in the 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;
};

Also, your HTML with this JavaScript won't need to call the JS directly in the onclick attribute, you can just do that in the JS loop above (then you don't have to write an entire new function for adding something to the list)

    <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>

Another option if you ever wanted the values that go in the title do be different from the actual text of the menu, you can use data-attributes like this:

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

Then in the loop, you could use this to set the value to something different than what's in the menu

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