2
votes

L'invite javascript ne s'affiche pas

J'essaie de créer du code pour une classe qui invite l'utilisateur à entrer trois nombres puis préforme quelques calculs à ces nombres, le calcul consiste à mettre au carré un nombre, multiplier et multiplier le nombre par PI puis les afficher dans le bon cellules. À l'heure actuelle, mon onClick ne fonctionne pas et aucune invite ne s'affiche pour l'utilisateur. J'ai les fonctions min et max là-dedans, car c'est nécessaire Voici mon code:

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Assignment 2</title>
</head>

<body>
  <table>
    <tr>
      <th>Number</th>
      <th>Squared</th>
      <th>Divided by Pi</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>

table,
th,
tr,
td {
  border-collapse: collapse;
}

table {
  width: 80%;
  margin: 10%;
}

th {
  width: 33%;
  border: 2px solid black;
  justify-content: space-evenly;
  height: 25px;
  background-color: white;
}

td {
  border: 1px solid black;
  padding: 1%;
  text-align: center;
  background-color: greenyellow;
}

function promptForNumber(promptString, min, max) {
  Array.prototype.max = function() {
    return Math.max.apply(null, this);
  };

  Array.prototype.min = function() {
    return Math.min.apply(null, this);
  };
}

function populateRow(row) {
  var number = promptForNumber("Enter your number");
  row.cells[0].innerHTML = number;
  row.cells[1].innerHTML = Math.pow(number, 2);
  row.cells[2].innerHTML = (number / Math.PI).toFixed(4);
}

function isNotANumber(NaN) {
  var isNotANumer = promptForAValidNumber("Please enter a 
    valid number ")
  }

javascript html onclick prompt

2 commentaires

Actuellement, mon onClick ne fonctionne pas où est votre fonction onClick?

J'ai oublié de l'ajouter lorsque j'ai copié et collé le code, je faisais un peu de jeu et je l'ai supprimé un peu. Il irait dans chaque en-tête de tr et ressemblerait à ceci - onClick = "populateRow (this);"

3 Réponses :

0
votes

Vous avez une ligne supplémentaire dans votre code d'invite, veuillez corriger votre code comme ci-dessous:

function isNotANumber(NaN) {
    var isNotANumer = promptForAValidNumber("Please enter a valid number")
}

Vous devez également utiliser la méthode standard d'invite:
https://www.w3schools.com/jsref/met_win_prompt.asp p >

1 commentaires

Cela ne répond pas à la question des OP et ne résout pas le problème.

1
votes

Cela ressemble à une question de devoir comme vous l'avez mentionné, c'est pour un cours, donc je ne peux pas vous donner la solution exacte au problème. Cependant, je soulignerai ce qui ne va pas avec votre code pour le moment.

Vous avez mentionné que votre "onClick" ne fonctionne pas, mais vous n'avez aucune fonction onClick dans ce code.
Vous devez utiliser la méthode window.prompt () pour demander une entrée utilisateur dans JS.

Vous devez créer un bouton sur lequel l'utilisateur peut appuyer pour recevoir une alerte. Ajoutez un écouteur d'événements sur ce bouton qui invite l'utilisateur à entrer un nombre. Vous pouvez obtenir de l'aide sur ici . Une fois que vous avez stocké le numéro de l'invite dans une variable, utilisez cette variable pour effectuer les différentes opérations mathématiques et ajoutez-les au tableau.

2 commentaires

Ouais, j'ai lu ça et je l'ai oublié. Je mettrais onClick dans le tds d'ouverture

Désolé, ça irait très dans chaque bloc

0
votes

En fait, vous devez ajouter l'écouteur d'événements pour écouter les événements de clic. Peut quelque chose comme

<html lang="en">
 <head>
    <title>Assignment 2</title>
     <style>
            table, th, tr, td {
                border-collapse: collapse;
            }
            table {
                width: 80%;
                margin: 10%;
            }
            th {
                width: 33%;
                border: 2px solid black;
                justify-content: space-evenly;
                height: 25px;
                background-color: white;
            }
            td {
                border: 1px solid black;
                padding: 1%;
                text-align: center;
                background-color: greenyellow;
            }
     </style>
    </head>
 <body>
   <table>
    <tr>
        <th>Number</th>
        <th>Squared</th>
        <th>Divided by Pi</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </table>
  <script>
function promptForNumber(promptString, min, max) {
    Array.prototype.max = function() {
        return Math.max.apply(null, this);
    };

    Array.prototype.min = function() {
        return Math.min.apply(null, this);
    };
}

function populateRow(row) {
    var number = window.prompt("Enter your number");
    var cell = row.getElementsByTagName("td");
    cell[0].innerHTML = number;
    cell[1].innerHTML = Math.pow(number, 2);
    cell[2].innerHTML = (number / Math.PI).toFixed(4);

}

function isNotANumber(NaN) {
    var isNotANumer = promptForAValidNumber("Please enter a valid number")
}

var table = document.getElementsByTagName("table")[0];
var rows = table.getElementsByTagName("tr");
console.log('rows', rows);
for (let i = 0; i < rows.length; i++) {
    let currentRow = table.rows[i];
    currentRow.addEventListener("click", function() {

        populateRow(currentRow);

    })


};


 </script>
 </body>
 </html>

0 commentaires