console 命令行工具 X clear

console

let button = document.querySelector('#uploadBtn')
let text = document.querySelector('#tip') 
let nameInput = document.querySelector('#name')
let emailInput = document.querySelector('#email')


button.onclick = function(){
    let name = document.querySelector('#name').value;
    let email = document.querySelector('#email').value;
    let genderElement = document.querySelector("input[name='gender']:checked");
    text.style.color = 'red'
    if(name.trim() === '' ||email.trim() ===''||genderElement === null){
        document.querySelector('#tip').textContent = '请填写完整信息';
        text.style.color = 'red'
        nameInput.style.border = '2px solid red'
        emailInput.style.border = '2px solid red'
        tip.classList.remove('hidden');
        setTimeout(() => {
        tip.classList.add('hidden');
        }, 3000);
        return;}else{
        let message = '注册成功！你好'+name +'，你的邮箱是'+email+'，你的性别是'+genderElement.value+'。';
        document.querySelector('#tip').textContent = message;
        text.style.color = 'green'
        nameInput.style.border = '2px solid green'
        emailInput.style.border = '2px solid green'
        button.disabled = true
        button.style.color='gray'
        tip.classList.remove('hidden');
        setTimeout(() => {
        tip.classList.add('hidden');
        }, 3000);
        }
    
    
    
}

<!DOCTYPE html>
<html>
<head>
    <title>简易注册表</title>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" id="name" placeholder="输入您的姓名">
    <input type="text" id="email" placeholder="输入您的邮箱">
    
    <label for="gender">输入您的性别：</label>
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女">女

    <br><br>
    <button id="uploadBtn">上传</button>

    <h2 id='tiptitle'>你的注册信息：</h2>
    <div id="result"></div>
    <p id="tip" class="hidden">提示信息会显示在这里</p>
</body>
</html>

.hidden {
  display: none;
}