如何在JavaScript中实现输入原子序数输出原子名称？

Hey there! Let's get your code working properly so it can output the correct atom name when you input an atomic number. I'll walk you through the issues in your current code and show you the corrected version, with explanations so you understand each change.

Main Issues in Your Current Code #

Let's start by pointing out the key problems that are stopping your code from running as expected:

• Your NaamOfAtoom function calculates the atom name but doesn't save or return that value to be used elsewhere. Also, the case 19 entry is missing a break, and the atoms in your Naam array (starting from Calcium, atomic number 20) aren't connected to the function logic.
• The values you get from the input fields are strings, not numbers—so when you calculate Neutronen = Massa - Protonen, it might not work correctly.
• You never call NaamOfAtoom in your berekenen function, so the Atoomnaam variable is never set.
• Some variables (like Atoomnummer) are referenced but never assigned a value.

Corrected Code #

Let's rewrite the JavaScript to fix these issues, and keep your HTML/CSS mostly the same (with small tweaks for clarity):

HTML (Minor Adjustments) #

<!DOCTYPE html>
<html lang="nl"> <!-- Changed to Dutch for better localization -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atoomgegevens Berekenen</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title" id="title">Atoomgegevens Resultaten:</h1>
    <form id="Form">
        Atoomnummer: <br>
        <input id="Atoomnummer" type="number" placeholder="Voer het atoomnummer in"> <!-- Changed to number input -->
        <br>
        Massa getal: <br>
        <input id="Massa" type="number" placeholder="Voer het massagetal in"> <!-- Changed to number input -->
        <br>
    </form>
    <button type="button" onclick="berekenen();">Bereken atoomgegevens</button>
    <button type="button" onclick="Writing();">Toon resultaten</button>
    <script src="script.js"></script>
</body>
</html>

CSS (Unchanged + Minor Spacing Tweaks) #

body {
    background-color: rgba(145, 248, 248, 0.562);
    border: 2px solid black;
    padding: 20px; /* Added padding for better spacing */
}

button {
    padding: 10px 20px; /* Adjusted padding for better look */
    margin: 20px 10px 20px 0;
}

input {
    padding: 10px;
    margin: 5px 0 15px 0;
    width: 250px; /* Fixed width for consistency */
}

JavaScript (Major Fixes & Improvements) #

// Use an object to store atomic numbers and their names—this is easier to maintain than a switch statement!
const atomData = {
    1: "Waterstof(H)",
    2: "Helium(He)",
    3: "Lithium(Li)",
    4: "Beryllium(Be)",
    5: "Boor(B)",
    6: "Koolstof(C)",
    7: "Stikstof(N)",
    8: "Zuurstof(O)",
    9: "Fluor(F)",
    10: "Neon(Ne)",
    11: "Natrium(Na)",
    12: "Magnesium(Mg)",
    13: "Aluminium(Al)",
    14: "Silicium(Si)",
    15: "Fosfor(P)",
    16: "Zwafel(S)",
    17: "Chloor(Cl)",
    18: "Argon(Ar)",
    19: "Kalium(K)",
    20: "Calcium(Ca)",
    21: "Scandium(Sc)",
    22: "Titaan(Ti)",
    23: "Vanadium(V)",
    24: "Chroom(Cr)",
    25: "Mangaan(Mn)",
    26: "Ijzer(Fe)",
    27: "Kobalt(Co)",
    28: "Nikkel(Ni)",
    29: "Koper(Cu)",
    30: "Zink(Zn)",
    31: "Galium(Ga)",
    32: "Germanium(Ge)",
    33: "Arseen(As)",
    34: "Seleen(Se)",
    35: "Broom(Br)",
    36: "Krypton(Kr)",
    37: "Rubidium(Rb)",
    38: "Strontium(Sr)",
    39: "Yttrium(Y)",
    40: "Zirkonium(Zr)",
    41: "Niobium(Nb)",
    42: "Molybdeen(Mo)",
    43: "Technetium(Tc)",
    44: "Ruthenium(Ru)",
    45: "Rhodium(Rh)",
    46: "Palladium(Pd)",
    47: "Zilver(Ag)",
    48: "Cadmium(Cd)",
    49: "Indium(In)",
    50: "Tin(Sn)",
    51: "Antimoon(Sb)",
    52: "Telluur(Te)",
    53: "Jood(I)",
    54: "Xenon(Xe)",
    55: "Cesium(Cs)",
    56: "Barium(Ba)",
    57: "Lanthaan(La)",
    58: "Cerium(Ce)",
    59: "Praseodymium(Pr)",
    60: "Neodymium(Nd)",
    61: "Promethium(Pm)",
    62: "Samarium(Sm)",
    63: "Europium(Eu)",
    64: "Gadolinium(Gd)",
    65: "Terbium(Tb)",
    66: "Dysprosium(Dy)",
    67: "Holmium(Ho)",
    68: "Erbium(Er)",
    69: "Thulium(Tm)",
    70: "Ytterbium(Yb)",
    71: "Lutetium(Lu)",
    72: "Halfnium(Hf)",
    73: "Tantaal(Ta)",
    74: "Wolfraam(W)",
    75: "Renium(Re)",
    76: "Osmium(Os)",
    77: "Iridium(Ir)",
    78: "Platina(Pt)",
    79: "Goud(Au)",
    80: "Kwik(Hg)",
    81: "Thallium(Tl)",
    82: "Lood(Pb)",
    83: "Bismut(Bi)",
    84: "Polonium(Po)",
    85: "Astaat(At)",
    86: "Radon(Rn)",
    87: "Francium(Fr)",
    88: "Radium(Ra)",
    89: "Actinium(Ac)",
    90: "Thorium(Th)",
    91: "Protactinium(Pa)",
    92: "Uraan(U)",
    93: "Neptunium(Np)",
    94: "Plutonium(Pu)",
    95: "Americium(Am)",
    96: "Curium(Cm)",
    97: "Berkelium(Bk)",
    98: "Californium(Cf)",
    99: "Einsteinium(Es)",
    100: "Fermium(Fm)",
    101: "Mendelevium(Md)",
    102: "Nobelium(No)",
    103: "Lawrencium(Lr)",
    104: "Rutherfordium(Rf)",
    105: "Dubnium(Db)",
    106: "Seaborgium(Sg)",
    107: "Bohrium(Bh)",
    108: "Hassium(Hs)",
    109: "Meitnerium(Mt)",
    110: "Darmstadtium(Ds)",
    111: "Roentgenium(Rg)"
};

// Global variables to store calculated data
let protonen, elektronen, neutronen, atoomnaam, atoomnummer, massa;

function berekenen() {
    // Get input values and convert to numbers
    atoomnummer = parseInt(document.getElementById("Atoomnummer").value);
    massa = parseInt(document.getElementById("Massa").value);

    // Set protons and electrons (equal to atomic number for neutral atoms)
    protonen = atoomnummer;
    elektronen = atoomnummer;

    // Calculate neutrons only if mass number is provided
    neutronen = massa ? massa - protonen : "Niet opgegeven";

    // Get atom name from our atomData object
    atoomnaam = atomData[atoomnummer] || "Dit atoom bestaat niet";
}

function Writing() {
    // Log to console for debugging
    console.log("Atoomnaam:", atoomnaam, "Atoomnummer:", atoomnummer);
    
    // Show results in a clear alert
    alert(`
Atoomgegevens:
----------------
Atoomnummer: ${atoomnummer}
Atoomnaam: ${atoomnaam}
Protonen: ${protonen}
Elektronen: ${elektronen}
Neutronen: ${neutronen}
    `);
}

Key Changes Explained #

1. Using an Object for Atom Data: Instead of a mix of switch and arrays, we use a JavaScript object where each key is the atomic number, and the value is the atom name. This makes it super easy to look up the name and add/remove atoms later.
2. Converting Inputs to Numbers: We use parseInt() to turn the string input from the fields into actual numbers, so calculations like massa - protonen work correctly.
3. Automatic Name Lookup: Now when you click "Bereken atoomgegevens", the function automatically fetches the atom name using the atomic number.
4. Better Error Handling: If an invalid atomic number is entered, it shows "Dit atoom bestaat niet". If no mass number is entered, it shows "Niet opgegeven" for neutrons.
5. Cleaner Alert Format: The alert uses template literals (backticks `) to format the results neatly, making them easier to read.
6. Dutch Localization: Changed the HTML language to Dutch and updated button/input text to match your language.

How to Test It #

1. Save the corrected HTML, CSS, and JS files in the same folder.
2. Open the HTML file in a browser.
3. Enter an atomic number (like 6 for Koolstof) and optionally a mass number.
4. Click "Bereken atoomgegevens" first, then "Toon resultaten"—you'll see the correct atom name and other data!

Great job starting this project at 14—keep coding, you're doing awesome!

内容的提问来源于stack exchange，提问作者user12980262