javascript - Cannot set property 'innerHTML' of undefined, Contact form submit

Question

I want to make a contact form, but my text is not displayed when I press "Submit". And my error is Cannot set property "innerHTML" of undefined. Its an external file. I add under my code. All my external files. If you have any advice just type it, thanks :D (sorry for my bad english i'm trying to improve it)

function validation() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;
    var error_message = document.getElementById("error_message").value;
    var text;

    error_message.style.padding = "10px";

    if (name.length < 5 ) {
        text = "Te rog sa introduci un nume valid";
        error_message.innerHTML = text;
        return false;
    }

    if (message.length <= 50) {
        text = "Te rog sa introduci minim 50 de caractere";
        error_message.innerHTML = text;
        return false;
    }

    if(email.indexOf('@') || email.length < 6) {
        text = "Te rog sa introduci un email valid";
        error_message.innerHTML = text;
        return false;
    }
    alert("S-a trimis cu succes!");
    return true;

}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@800&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    font-family: 'Gloria Hallelujah', cursive;
    --text-primary: #b6b6b6;
    --text-secondary: #ececec;
    --bg-primary: #23232e;
    --bg-secondary: #141418;
}
body {
    font-family: 'Gloria Hallelujah', cursive;
    background-color: #363535;
    display: flex;
}

.main {
    margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */
    padding: 1rem;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

body::-webkit-scrollbar {
    width: 0.25rem;
}

body::-webkit-scrollbar-track {
    background: #757d77;
}

body::-webkit-scrollbar-thumb {
    background: #c2c2c2;
}

.navbar {
    width: 5rem;
    height: 100vh;
    position: fixed;
    background-color: #2e2e2e;
}

.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    margin-top: 225px;
}

.nav-item {
    font-size: 30px;
    text-align: center;
    width: 85%;
    padding: 10px
}

ul {
    list-style-type: none;
}
li a {
    display: block;
    text-decoration:0;
    color:#b6b8ba;
}


.nav-link {
    align-items: center;
    height: 3rem;
    text-decoration: none;
}

.secnav-item {
    font-size: 30px;
    text-align: center;
    padding: 5px;
    width: 85%
}

.secnavbar {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

.imgnav {
    margin-top: 10px;
    margin-left: 27px;
    position: absolute;
}

.copy {
    color: white;
    position: absolute;
    margin-left: 50px;

}

.contact-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-info {
    position: relative;
    color: #fff;
    max-width: 500px;
    line-height: 95px;
    padding-left: 50px;
    font-size: 18px;
    top: 50px;
}

.contact-info i {
    margin-right: 20px;
    font-size: 25px;
}

.contact-form {
    max-width:700px;
    margin-right: 50px;
    position: relative;
    top: 50px;
    left: 100px;

}

.contact-info, .contact-form {
    flex: 1;
}

.contact-form h2 {
    color: #fff;
    text-align: center;
    font-size: 35px;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-family: 'Poppins', sans-serif;
}

.contact-form .text-box {
    background: #b8b8b8;
    color: #fff;
    border: none;
    width: calc(50% - 10px);
    height: 50px;
    padding: 12px;
    font-size: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    opacity: 0.9;
}

.contact-form .text-box:first-child {
    margin-right: 15px;
}

.contact-form textarea {
    background: #b8b8b8;
    color: #fff;
    border: none;
    width: 100%;
    padding: 12px;
    font-size: 15px;
    min-height: 200px;
    max-height: 400px;
    resize: vertical;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    opacity: 0.9;
}

.contact-form .send-btn {
    float: right;
    background: #261010;
    color: #fff;
    border: none;
    width: 120px;
    height: 40px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    transition-property: background;
}

.contact-form .send-btn:hover {
    background: #ff2a00;
}

#error_message {
    padding: 0;
    background: #d60000;
    margin-bottom: 2px;
    text-align: center;
    font-size: 15px;
    transition: all 0.5s ease;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Constantin Bogdan-Teodor</title>
    <link rel="icon" href="https://icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon">
    <link rel="stylesheet" href="contactme.css" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet"
    <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script>
    <script src="contact.js"></script>
</head>
<body>

<div class="navbar">
    <div class="copy">
        &copy;
    </div>
    <div class="imgnav">
        <a href="home.html">
            <svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/>
            </svg>
        </a>

    </div>

    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="home.html" class="nav-link">
                <i class="fas fa-home"></i>
            </a>
        </li>

        <li class="nav-item">
            <a href="aboutme.html" class="navbar-link">
                <i class="far fa-user"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="goals.html" class="navbar-link">
                <i class="fas fa-bullseye"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="stiaica.html" class="navbar-link">
                <i class="fas fa-code"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="contactme.html" class="navbar-link">
                <i class="fas fa-at"></i>
            </a>
        </li>
    </ul>

    <div class="secondnav">
        <ul class="secnavbar">
            <li class="secnav-item">
                <a href="https://www.facebook.com/bogdan.teodor.148/"  target="_blank" class="secnavbar-link">
                    <i class="fab fa-facebook"></i>
                </a>
            </li>
            <li class="secnav-item">
                <a href="https://www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link">
                    <i class="fab fa-instagram">&l

Answer 1

I think that you cant write this line of code like this var error_message = document.getElementById("error_message").value;

It should be var error_message = document.getElementById("error_message"); Because you dont need value of div you only need div.