Блог

Главная - Вопросы по программированию - Javascript, отображение результатов при нажатии кнопки

Javascript, отображение результатов при нажатии кнопки

#javascript #if-statement #onclick

#javascript #оператор if #onclick

Вопрос:

Предполагается, что пользователь вводит пол и возраст, нажимает на кнопку, и будет отображаться некоторый текст и изображения. Когда я нажимаю кнопку, ничего не происходит. Я студент / новичок в JavaScript и совершенно новичок в этом. Я знаю, что код неполон 🙂 — Кто-нибудь может дать мне несколько советов?

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Et forslag</title>
</head>
<body>
    <div>
        <header>
            <h1>FindYourLove</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="alle-profiler.html">Alle profiler</a></li>
                <li><a href="profil-forslag.html">Dagens profil</a></li>
            </ul>
        </nav>
        
        <main>
        
            <section>
                <label>Tast inn ønsket alder</label>
                <input type="text" id="alder-p"><br>
                <label>Mann eller kvinne?</label>
                <input type="text" id="gender-p">
                <input id="forslag-btn" type="button" value="Vis forslag">
                <p id="output-p"></p>
            </section>
            
            <script>
                function visBruker(){
                var alder = document.getElementById("alder-p");
                var kjønn = document.getElementById("gender-p");
                }
                    
                var outputP = document.getElementById("output-p");
                var forslagBtn = document.getElementById("forslag-btn");
                
                
                if( kjønn == mann amp;amp; alder >= 25){
                    outputP.innerHTML = "Simen";   
                }
                else if( kjønn == mann amp;amp; alder =<25 ){
                   
                }
                else if( kjønn == kvinne amp;amp; alder >= 25){
                    
                }
                else{
                    
                }
                
                
            </script> 
        </main>
    </div>
</body>
</html>

Ответ №1:

Я создаю этот код, он отлично работает, надеюсь, он вам поможет. Дайте мне знать, если вам нужна дополнительная помощь.

 const btn = document.getElementById("forslag-btn");
const outputP = document.getElementById("output-p");
btn.addEventListener("click", () => {
  const alder = document.getElementById("alder-p").value;
  const kjønn = document.getElementById("gender-p").value;
  if (kjønn === "mann") {
    if (alder >= 25) {
      outputP.innerText = "Simen";
    } else {
      console.log("y");
    }
  }
  if (kjønn === "kvinne") {
    if (alder >= 25) {
      console.log("x");
    } else {
      console.log("y");
    }
  }
});

Ответ №2:

Вам нужно добавить обработчик события onclick к кнопке, чтобы ваша функция выполнялась всякий раз, когда вы нажимаете на нее.

<input id="forslag-btn" type="button" value="Vis forslag" onclick="visBruker()">

Ответ №3:

Вам нужно будет изменить свой скрипт, чтобы он запускался как функция onclick события. То, что у вас есть сейчас, запускается при загрузке страницы. Функция onclick будет добавлена в html-элемент button.

 <button onclick="function()">Button</button>

Ответ №4:

Вам просто нужно добавить атрибут onClick и установить для него функцию, которую вы хотите запускать при нажатии кнопки. Если вы пытаетесь скрыть объекты в фоновом режиме и отображать их при нажатии, вы можете использовать display: none и заставить скрипт отображать изображения и текст при нажатии кнопки.

 <input id="forslaf-btn" type="button" value="Vis forslag onClick="visBruker">