嵌套HTML的随机辱骂JavaScript代码无法运行，请求调试

核心问题点 #

• DOM加载顺序错误：原脚本放在HTML元素之前，执行时目标元素尚未渲染，导致获取不到结果容器。
• 元素ID不匹配：JS中查找result元素，但HTML中结果容器的ID是insult，两者不一致。
• 随机数逻辑缺陷：手动写死数组长度，且Math.round(Math.random() * 96 - 1)可能生成负数索引，导致取不到辱骂文本。

修复后的完整代码 #

<main>
    <form onsubmit='Submit(event)'>
        <label for='name'>Name</label>
        <input id='name' name='name' type='text'>
        <button type='submit'>Check</button>
    </form>
    <div>
        <h2>Insult</h2>
        <h3 id='insult'></h3>
    </div>
    <script>
        const insults = [
'${name} is a lucky ducky! 99, dam!.',
'${name} was so close to success. But I guess you`re just a failure in life.',
'${name}, is kinda stupid.',
'Hey, ${name}, turn 96 upside down.',
'${name}, 95 is literally the most boring number you could have gotten. Go try again..',
'${name}, can I have the name of your hair salon? I need to know where not to go.',
'${name}, you are the human equivalent of a participation trophy.',
'${name}, you have a face for radio.',
'${name}, whatever kind of look you were aiming for, you missed.',
'${name}, I smell something burning. Are you trying to think again?',
'${name}, you’re like a lighthouse in a desert: bright but not very useful.',
'${name}, you’re as useless as the “ueue” in “queue!',
'${name}, whatever is eating you must be suffering terribly.',
'${name}, if you ever had a thought, it would die of loneliness.',
'${name}, this is why the gene pool needs a lifeguard.',
'${name}, you have the charisma of a wet sock.',
'${name}, I don’t understand, but I also don’t care, so it works out nicely.',
'${name}, I’ve seen salad that dresses better than you.',
'${name}, You have the communication skills of an alarm clock.',
'${name}, honestly, I`m just impressed you could read this.',
'${name}, no I`m not insulting you, I`m describing you.',
'${name},  your birth certificate is an apology letter from the condom factory.',
'${name}, the only way you`ll ever get laid is if you crawl up a chicken`s ass and wait.',
'${name}, my psychiatrist told me I was crazy and I said I want a second opinion. He said okay, you`re ugly too.',
'${name}, you must have been born on a highway because that`s where most accidents happen.',
'${name}, brains aren`t everything. In your case they`re nothing.',
'${name}, some babies were dropped on their heads but you were clearly thrown at a wall.',
'${name}, you can walk, but can you talk?',
'${name}, I`d slap you, but that would be animal abuse.',
'${name}, stop trying to be a smart ass, you`re just an ass.',
'${name}, Damn, you just got the best number! 6--------9!',
'${name}, One off from 69, get better at life.',
'${name}, why was six scared of seven? Because seven ate nine!',
'${name}, why don`t you slip into something more comfortable... like a coma.',
'${name}, you get ten times more girls/boys than me? ten times zero is zero...',
'${name}, You`re so fat, you could sell shade.',
'${name}, have you been shopping lately? They`re selling lives, you should go get one.',
'${name}, I don`t think you understand the concept of `no eating`.',
'${name}, that`s one small step for me, and a massive one for you.',
'${name}, I`d like to see things from your point of view but I can`t seem to get my head that far up my ass.',
'${name}, every time I`m next to you, I get a fierce desire to be alone.',
'${name}, why do you always wear black? Do you like looking like a clown?',
'${name}, you`re so dumb that you got hit by a parked car.',
'${name}, how did you get here? Did someone leave your cage open?',
'${name}, I didn’t ask for your opinion.',
'${name}, pardon me, but you`ve obviously mistaken me for someone who gives a damn.',
'${name}, don`t you have a terribly empty feeling - in your skull',
'${name}, as an outsider,what do you think of the human race?',
'${name}, I have neither the time nor the crayons to explain this to you.',
'${name}, I would agree with you but then we would both be wrong.',
'${name}, you`re so dense, light bends around you.',
'${name}, you`re as useful as a waterproof teabag.',
'${name}, you`re so clumsy, you could trip over a wireless network.',
'${name}, you`re so slow, you make sloths look like Olympic sprinters.',
'${name}, you`re not completely useless; you can always serve as a bad example.',
'${name}, you`re so gullible, I could sell you air and you`d buy it.',
'${name}, your family tree must be a cactus, because everyone on it is a prick.',
'${name}, you`re not just a clown; you`re the entire circus.',
'${name}, your agility is comparable to a turtle on a trampoline.',
'${name}, you have the problem-solving skills of a confused penguin in a desert',
'${name}, you look like you were drawn with my left hand',
'${name},  I do not consider you a vulture. I consider you something a vulture would eat',
'${name}, what do you think of that, Mr. Pajama-Wearing, Basket-Face, Slipper-Wielding, Clipe-Dreep-Bauchle, Gether-Uping-Blate-Maw, Bleathering, Gomeril, Jessie, Oaf-Looking, Stauner, Nyaff, Plookie, Shan, Milk-Drinking, Soy-Faced Shilpit, Mim-Moothed, Sniveling, Worm-Eyed, Hotten-Blaugh, Vile-Stoochie, Callie-Breek-Tattie?',
'${name}, Your mother was a broken down tub of junk with more gentlemen callers than the operator.',
'${name}, White people are just untitled word documents.',
'${name}, you`re so dumb, when your dad said to put your grades up, you put your test up on the roof.',
'${name}, Mirrors can`t talk. Lucky for you, they can`t laugh either.',
'${name}, in a parallel universe, you might be smart.',
'${name},  Only 1 in 100 people get this on their first try. You aren`t lucky. you`re just the hundreth person.',
'${name}, I`ll never forget the first time we met. But I`ll keep trying.',
'${name}, Here are the first hundred digits of pi! you`re welcome: 3.1415926535 8979323846 2643383279 5028841971 6939937510 5820974944 5923078164 0628620899 8628034825 3421170679',
'${name}, Honestly, does anyone even appreciate my work?',
'${name},The number 29 is fine. But are you?',
'${name}, Did the mental hospital test too many drugs on you today?',
'${name}, thought of you today. It reminded me to take out the trash.',
'${name}, somewhere out there is a tree tirelessly producing oxygen for you. You owe it an apology.',
'${name}, you just might be why the middle finger was invented in the first place.',
'${name}, if I had a face like yours, I would sue my parents.',
'${name}, if I wanted to kill myself, I would climb to your ego and jump to your IQ.',
'${name}, Phew, I`m getting tired of typing all those insults. Why don`t you help me out a little, and tell me your personality so that I can make more.',
'${name}, don’t be ashamed of who you are. That’s your parent`s job.',
'${name}, you are proof that evolution can go in reverse.',
'${name}, Isn’t it dangerous to use your whole vocabulary in one sentence?',
'${name}, if I had a dollar for every time you said something smart, I’d be broke.',
'${name}, people clap when they see you. They clap their hands over their eyes',
'${name}, I bet your parents change the subject when their friends ask about you.',
'${name}, find the fact that you’ve lived this long both surprising and disappointing.',
'${name}, carry a plant around with you to replace the oxygen you waste.',
'${name}, don’t know what your problem is, but I’m guessing it’s hard to pronounce.',
'${name}, you see that door? I want you on the other side of it.',
'${name}, final 10, I can see the light. Oh wait, you`re on the other side. Back we go!',
'${name}, You look like a person in their 80`s, but you act like someone who`s 9.',
'${name}, If I had a dollar for everytime you said something smart I would be broke.',
'${name}, may both sides of your pillow be uncomfortably warm.',
'${name}, This is the most useless number you could have gotten.',
'${name}, you had a five percent chance to get this number. Good job!',
];

function Submit(e){
    e.preventDefault();
    let data = new FormData(e.target);
    let name = data.get("name");
    // 自动适配数组长度的随机索引，无越界风险
    let randomIndex = Math.floor(Math.random() * insults.length);
    const insult = insults[randomIndex].replace('${name}', name);
    setResult(insult);
}

// 脚本移到元素后，确保能获取到结果容器
const res = document.getElementById('insult');

function setResult(val){
    res.textContent = val;
}
    </script>
</main>

关键修复说明 #

1. 调整脚本位置：将脚本放在HTML结构末尾，保证DOM元素全部渲染后再执行JS，避免获取元素失败。
2. 修正ID匹配：统一JS和HTML中的结果容器ID为insult，确保能正确定位到显示区域。
3. 优化随机索引：使用Math.floor(Math.random() * insults.length)生成索引，自动适配数组长度，彻底解决越界和负数问题。
4. 修正引号实体：将"替换为标准双引号，避免解析异常。

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