Question

我在将值从HTML传递到JavaScript时遇到问题。这是我正在制作的一款RPG小游戏，我希望用户以某种形式键入其名称，年龄，职业和种族，并使用其信息创建一个Character对象。

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.form-group{
    margin-left:350px;
    margin-right:350px;
    margin-top: 25px;
}

.form-check{
    margin-left:350px;
}

#boton{
    margin-left:350px;
    margin-top:15px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Iniciando</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="criarPersonagem.css"/>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"/>
    <script src="criarPersonagem.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">
        <img src="mg.jpg" alt="Logo" style="width:40px;" />
      </a>
      <!-- Links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="rascunho.html">Battle RPG</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </nav>
    <h1 style="text-align: center;">Welcome to the game!</h1>
    <h3 style="text-align: center;">Create your own Character</h3>
    <form action="" name="criarPP">
      <div class="form-group">
        <input
          type="text"
          class="form-control"
          id="nameCharacter"
          placeholder="Your character's name"
        />
        <small id="nomePP" class="form-text text-muted"
          >This will be your nickname inside the game</small
        >
      </div>
      <div class="form-group">
        <input
          type="number"
          class="form-control"
          id="ageCharacter"
          placeholder="Your character's age"
        />
      </div>
      <div class="form-group">
        <select class="form-control" id="classCharacter">
          <option value="Null" hidden>Your character's class</option>
          <option value="Mage">Mage</option>
          <option value="Assassin">Assassin</option>
          <option value="Warrior">Warrior</option>
          <option value="Paladin">Paladin</option>
          <option value="Necromancer">Necromancer</option>
          <option value="Druid">Druid</option>
        </select>
      </div>
      <div class="form-group">
        <select class="form-control" id="raceCharacter">
          <option value="Null" hidden>Your character's race</option>
          <option value="Human">Human</option>
          <option value="Elf">Elf</option>
          <option value="Orc">Orc</option>
          <option value="Dwarf">Dwarf</option>
          <option value="Argonian">Argonian</option>
          <option value="Darl elf">Dark elf</option>
        </select>
      </div>
      <button
        type="submit"
        class="btn btn-primary"
        id="boton"
        onclick="create()"
      >
        Create
      </button>
    </form>
  </body>
</html>

<template>
  <label class="form-label-place" for="city">
    <input class="form-control" type="text" id="inputPlace" name="city" placeholder="Ingresa tu ciudad">
  </label>
</template>
<script>
export default {
  name: 'input-place',
  mounted() {
      // Google autocomplete
      google.maps.event.addDomListener(window, 'load', () => {
        var options = {
          types: ['(cities)'],
          componentRestrictions: {country: "PE"}
        };
        var places = new google.maps.places.Autocomplete(document.getElementById('inputPlace'), options);
        google.maps.event.addListener(places, 'place_changed', () => {
          this.$parent.placeChanged(places)
        });
      });
  }
}
</script>

我尝试过一些尝试，但经过几次尝试和失败。我开始认为表单标签甚至按钮标签中都缺少

预期结果很简单：通过表单成功创建对象。我通常会尝试在控制台上显示它，以查看是否有效。

Answer 1

您的按钮类型为提交，因此它正在创建对象，但是页面正在提交并且该对象消失了。尝试将按钮类型更改为我认为的提交按钮。

Answer 2

将按钮类型更改为“按钮”，

<button
        type="button"
        class="btn btn-primary"
        id="boton"
        onclick="create()"
>
    Create
</button>

这样，它将不会提交表单。

您也可以通过return false;或致电e.preventDefault()

来实现相同目的

从html表单到JavaScript对象获取值

2 个答案: