Блог

Я создаю генератор текста. Я пытаюсь написать функцию на 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>
  

Это более элегантное решение, которое устраняет некоторое дублирование кода и немного легче читается.

Это также упрощает добавление параметров в выпадающий список, который у вас есть, потому что вам нужно только добавить еще один элемент в свой список в 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 не нужно будет вызывать JS непосредственно в атрибуте onclick, вы можете просто сделать это в цикле 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;
//...