Question

用户应该输入性别和年龄，单击按钮，然后将显示一些文本和图像。当我单击按钮时，什么也没有发生。我是一名学生/ 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 && alder >= 25){
                    outputP.innerHTML = "Simen";   
                }
                else if( kjønn == mann && alder =<25 ){
                   
                }
                else if( kjønn == kvinne && alder >= 25){
                    
                }
                else{
                    
                }
                
                
            </script> 
        </main>
    </div>
</body>
</html>

Answer 1

您需要在按钮上添加onclick事件处理程序，以使您的函数在您单击时得到执行。

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

Answer 2

您需要更改脚本以作为事件onclick函数运行。现在，您所拥有的将在页面加载时运行。 onclick函数将添加到按钮html元素中。

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

Answer 3

您只需要添加onClick属性并将其设置为单击按钮时要运行的函数即可。如果您试图将事物隐藏在后台并在onClick上显示它们，则可以使用display: none并使脚本在单击按钮时显示图像和文本。

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

Answer 4

我创建了此代码，它可以正常工作，希望对您有所帮助。让我知道您是否需要更多帮助。

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

Javascript，单击按钮时显示结果

4 个答案: