Question

我的功能运行正常，但是我只看到1秒钟的结果然后页面会自动加载

我尝试过

<button onclick="person.generate() return false">generate !</button>

<form>
                    <input type="text" id="roastInput" placeholder="put the roast here">
                    <input type="range" id="lvlOfRoast" min="1" max="5">
                    <select id="selector">
                        <option>select the topic</option>
                        <option value="cheap">cheap</option>
                        <option value="ugly">ugly</option>
                        <option value="fat">fat</option>
                        <option value="short">short</option>
                    </select>
                    <button onclick="person.generate()">generate !</button>
                </form>

var lvlOfRoast = document.getElementById("lvlOfRoast");

var selector = document.getElementById("selector");

var roastInput = document.getElementById("roastInput").value;

// ------------生成烤肉-------------

class roastGenerator {

  generate(){
    for (var i = 0; i < selector.length; i++) {
      console.log("this is the " + i + " try" );
    if(lvlOfRoast.value == 1){
      if(selector.options[i].value == "cheap"){
      document.getElementById("generatedRoast").innerHTML = "it works!!" ;
      break;
    }else {
     console.log("pls choose cheap");

    }
}else{
  window.alert("pls choose 1");
  break;
}
}
};
  randomRoast(obj){
                var keys = Object.keys(obj)
                return obj[keys[ keys.length * Math.random() << 0]];
            };
} // close bracket for the class

var person = new roastGenerator();

Answer 1

您的表单假定该按钮是一个表单提交按钮，因此每当单击该按钮时，该表单都会尝试将数据发送到action属性中指定的内容或页面本身（因此导致重新加载），如果未指定action属性，或者action属性没有值。

只需在按钮元素中添加type="button"，即可告诉表单您的按钮不是提交调用者，而只是普通按钮。

tldr：：添加以上属性type="button"将防止单击按钮尝试提交表单数据。

<button type="button" onclick="person.generate()">generate !</button>

为什么我的页面在触发功能后自行加载（我使用的是普通js）

1 个答案: