打印我的JS函数的结果

Question

这是我的函数的代码，我试图将函数的结果放在partie 2中而不是partie 4中，而且我也很难理解如何停止使其重复结果。 每次输入输入时，我只想要1行结果。

这是功能的图片

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript"></script>
    <title>Travail pratique 3</title>
    <h1>Travail pratique #3</h1>   
    <h2>Identification</h2>
   </p>
    <p>Publi&eacute; sur mon tp3 &aacute; la DESI </p>
    <style>
    #toggleThis{
        margin-bottom: 5px;
        background: #e5eecc;
        border: solid;
        border:#c3c3c3;
        border: 1px;
        }

        #partie4{
            background-color: #e5eecc;
            margin-top:50px;
            display:none;
        }
    </style>
</head>
<body>
<h2>Partie 1: Affichage et animation des images</h2> 
<div id="radiobuttons">
<label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/0zfjKQi.jpg')" value="0" checked/>Salade</label>
<br>
<label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/OixGjjE.jpg')" value="1"/>Spaghetti</label><br>
<label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/gASTpLX.jpg')" value="2"/>Creme glacee</label>
<br><br><br><br><br><br><br>
</div>
<img id="food">

<h2>Partie 2: Affichage dans la page web contr&ocirc;l&eacute; par JavaScript</h2>

<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> 

    <div class="Affichage">

    </div>
    <h2>Partie 3: Formulaire de conversion</h2>
Valeur:<input type="text" id="value" name="valeur" value="0">
<p id="result">Resultat ici</p>
<button type="button" id="inchToCm" onclick="pvc('inch')">Pouces vers cm</button>
<button type="button" id="cmtoInch" onclick="pvc('cm')">CM vers pouces</button>
<button type="button" id="celciusToFarenheit" onclick="pvc('celc')">Celcius vers
    Farenheit</button>
<button type="button" id="farenheitToCelcius" onclick="pvc('fahr')">Farenheit vers Celcius</button>
    <div id="toggleThis">
    <h2>Partie 4: JQuery (cliquez ici)</h2>
    <div id="partie4">Voici le contenu de la partie 4, cliquez de nouveau sur le titre</div>
<script>
    function changeImage(imgUrl){
  document.querySelector("#food").src=imgUrl;
}   

</script>
<script>
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.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 );
        </script>

    <script>

function pvc(val) {
  var input = document.getElementById("value").value;
  var result = document.getElementById("result");

  if (val == 'inch') {
    result.innerHTML = input / 0.39370;
  } else if (val == 'cm') {
    result.innerHTML = input * 0.39370;
  } else if (val == 'celc') {
    result.innerHTML = 9 / 5 + 32;
  } else if (val == 'fahr') {
    result.innerHTML = (input - 32) * 5 / 9;
  }
}
</script>







</body>




</html>

有人知道该怎么做吗？

Answer 1

您正在调用JQuery 。 你为什么不使用它。 只需使用以下命令更改函数do_stuff ：

function do_stuff() {
  var x = $("input[name=fullname]").val();
  var y = $("input[name=niveau]").val();
if (parseInt(y)>=1 && parseInt(y)<=6){
    $( ".Affichage" ).html( "<p>Bonjour" + x + " Niveau=" + y + "'</p>");
    $( ".Affichage" ).css("color", "black");
} else {
    $( ".Affichage" ).html( "<p>Erreur le niveau doit etre en 1 et 6</p>");
    $( ".Affichage" ).css("color", "red");
}
}

希望我做对了。 这是一个工作片段。

 function changeImage(imgUrl) { document.querySelector("#food").src = imgUrl; } function do_stuff() { var x = $("input[name=fullname]").val(); var y = $("input[name=niveau]").val(); if (parseInt(y)>=1 && parseInt(y)<=6){ $( ".Affichage" ).html( "<p>Bonjour" + x + " Niveau=" + y + "'</p>"); $( ".Affichage" ).css("color", "black"); } else { $( ".Affichage" ).html( "<p>Erreur le niveau doit etre en 1 et 6</p>"); $( ".Affichage" ).css("color", "red"); } } document.addEventListener( "DOMContentLoaded", function() { for(let input of document.getElementsByTagName("input")) { if (input.type == "button") { input.addEventListener( "click", do_stuff ); } } }, false ); function pvc(val) { var input = document.getElementById("value").value; var result = document.getElementById("result"); if (val == 'inch') { result.innerHTML = input / 0.39370; } else if (val == 'cm') { result.innerHTML = input * 0.39370; } else if (val == 'celc') { result.innerHTML = 9 / 5 + 32; } else if (val == 'fahr') { result.innerHTML = (input - 32) * 5 / 9; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Partie 1: Affichage et animation des images</h2> <div id="radiobuttons"> <label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/0zfjKQi.jpg')" value="0" checked/>Salade</label> <br> <label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/OixGjjE.jpg')" value="1"/>Spaghetti</label><br> <label><input name="vf" type="radio" onclick="changeImage('http://i.imgur.com/gASTpLX.jpg')" value="2"/>Creme glacee</label> <br><br><br><br><br><br><br> </div> <img id="food"> <h2>Partie 2: Affichage dans la page web contr&ocirc;l&eacute; par JavaScript</h2> <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> <div class="Affichage"> </div> <h2>Partie 3: Formulaire de conversion</h2> Valeur:<input type="text" id="value" name="valeur" value="0"> <p id="result">Resultat ici</p> <button type="button" id="inchToCm" onclick="pvc('inch')">Pouces vers cm</button> <button type="button" id="cmtoInch" onclick="pvc('cm')">CM vers pouces</button> <button type="button" id="celciusToFarenheit" onclick="pvc('celc')">Celcius vers Farenheit</button> <button type="button" id="farenheitToCelcius" onclick="pvc('fahr')">Farenheit vers Celcius</button> <div id="toggleThis"> <h2>Partie 4: JQuery (cliquez ici)</h2> <div id="partie4">Voici le contenu de la partie 4, cliquez de nouveau sur le titre</div>

打印我的JS函数的结果

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-24 19:01:00

打印我的JS函数的结果

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-24 19:01:00

解决方案1
1 已采纳 2017-04-24 19:01:00