Question

我是javascript的新手，我目前正在处理我的第一个功能。我有这两个文本输入区，其中一个可以列出他的名字和他的等级。

<form action="/action_page.php">
Nom: <input type="text" name="fullname"><br><br>
Niveau (1 &aacute; 6): <input type="text" name="niveau">
<input type="submit" value="Afficher partie 2">
</form>

提交后，应该向用户显示一条消息，其中包含他的姓名和级别（如果级别在1-6之间，则为其错误消息）。

这是我编写剧本的方式：

<script>
var x = oninput;
var y = oninput;
if (y>=1){
  document.write("Bonjour + 'x'");
  document.write("Niveau='y'");
}if (y<=6){
  document.write("Bonjour + 'x'");
  document.write("Niveau='y'");
}
else {
  document.write("<p style="color:red;">Erreur le niveau doit etre en  
  1 et 6</p>
}
</script>

我真的很想知道我是否以正确的方式编写，我也无法想象如何用变量X向用户显示他的名字。

我在理解如何将脚本链接到输入框时也遇到了问题。

Answer 1

你的javascript有很多错误。我为你清理了一切。只需阅读注释即可了解JS正在做什么。玩得开心:)）

  function showmylevel(event) { 
    event.preventDefault(); // Prevent Form Actually Submitting
    var x = document.getElementsByName('fullname')[0].value; // Get Value
    var y = document.getElementsByName('niveau')[0].value; // Get Value
    console.log(y);
    if ( y>0 && y<7 ){
      document.write("Bonjour "+x); // Display Name
      document.write("<br>"); // Break Line
      document.write("Niveau = "+y); // Display Level
    } else {
      // Display Error
      document.write('<p style="color:red;">Erreur le niveau doit etre en 1 et 6</p>');
    }
    return false; // Stop Form From Going Anywhere
  }

<form action="action_page.php" onsubmit="showmylevel(event);">
Nom: <input type="text" name="fullname"><br><br>
Niveau (1 &aacute; 6): <input type="text" name="niveau"><br><br>
<input type="submit" value="Afficher partie 2">
</form>

Answer 2

试试这个，我希望它会起作用

在您的表单上，

<form name="form1" action="/action_page.php">
  Nom: <input type="text" name="fullname"><br><br>
  Niveau (1 &aacute; 6): <input type="text" name="niveau">
  <input type="submit" value="Afficher partie 2" onclick="myFunction()">
</form>

在您的脚本上

function myFunction() {
    var x = document.form1.fullname.value;
    var y = document.form1.niveau.value;

    if (y >= 1 && y <= 6) {
        document.write("Bonjour " +x);
        document.write("Niveau=" +y);
    } else {
        document.write("<p style='color:red;'>Erreur le niveau doit etre en 
        1 et 6</p>");
    }
}

Answer 3

这是您的代码版本，它不执行提交，而是将事件处理程序附加到按钮并附加到DOM而不是重写它。使用addEventListener附加事件处理程序，因为在HTML中放置onclick处理程序被视为不良格式。

＆＃13;

function do_stuff() {
  var x = document.getElementsByName("fullname")[0].value;
  var y = document.getElementsByName("niveau")[0].value;
  if (parseInt(y)>=1 && parseInt(y)<=6){
    document.body.appendChild(document.createTextNode("Bonjour "+x));
    document.body.appendChild(document.createElement("br"));
    document.body.appendChild(document.createTextNode("Niveau='"+y+"'"));
  }
  else {
    var p = document.createElement('P');
    p.style.color = "red";
    p.appendChild(document.createTextNode("Erreur le niveau doit etre en 1 et 6"));
    document.body.appendChild(p);
  }
}

document.addEventListener( "DOMContentLoaded", function() {
  for(let input of document.getElementsByTagName("input")) {
    if (input.type == "button") { input.addEventListener( "click", do_stuff ); }
  }
}, false );

＆＃13;

<form>
Nom: <input type="text" name="fullname"><br><br>
Niveau (1 &aacute; 6): <input type="text" name="niveau">
<input type="button" value="Afficher partie 2">
</form>

＆＃13;

提交Javascript if / else

3 个答案: