Uncaught Typeerror: Cannot Read Property 'Value' of Undefined

Uncaught TypeError: Cannot read property 'value' of undefined

Seems like one of your values, with a property key of 'value' is undefined. Test that i1, i2and __i are defined before executing the if statements:

var i1 = document.getElementById('i1');
var i2 = document.getElementById('i2');
var __i = {'user' : document.getElementsByName("username")[0], 'pass' : document.getElementsByName("password")[0] };
if(i1 && i2 && __i.user && __i.pass)
{
    if(  __i.user.value.length >= 1 ) { i1.value = ''; } else { i1.value = 'Acc'; }

    if(  __i.pass.value.length >= 1 ) { i2.value = ''; } else { i2.value = 'Pwd'; }
}

Uncaught TypeError: Cannot read property 'value' of undefined at HTMLInputElement.anonymous

the "problem" is with the event listener inside of the big function

the event listener is activated when there is a change in cl[0] and naturally you overwrite editbox.innerHTML when this listener is activated so it gets activated again (asynchronous logic)

the solution is simply saying if(cl[0] != undefined) {do rest of function}

my example is below (also prevents overlap of listeners)

let editbox = document.getElementById('editbox');
let val = editbox.innerText;
let showAlert = document.getElementById('alrt');
let edit = document.getElementsByClassName('edit');
var cl = document.getElementsByClassName('input')
editbox.addEventListener('click', clicked);

function clicked() {
    if (cl.length == 0) {
        editbox.innerHTML = '<input type="text" class="input">';
        cl[0].value = val
    }
    showAlert.style.visibility = 'visible';
    
    function theEditor () {
      if(cl[0] != undefined){
        if(cl[0].value.length > 0){
        val = cl[0].value;
        editbox.innerHTML = `<div class="edit">${val}</div>`;
        showAlert.style.visibility = 'hidden'
        } else {
            alert('You can not leave box empty')
        }
      }
    }
    cl[0].removeEventListener('blur', theEditor)
    cl[0].addEventListener('blur', theEditor)
}

@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Raleway:wght@300&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.container{
    background-color: #83AF9B;
    border: 4px solid black;
    width: 80%;
    margin: 50px auto;
    padding: 5px;
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    height: 100px;
    border-radius: 10px;
    box-shadow: 10px 10px 40px grey;
    flex-direction: column;
}
.edit {
    margin: 0px 0px 0px 10px;
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
}
.alert{
    margin-left: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    visibility: hidden;
}

.input{
    margin: 0px 0px 0px 10px;
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
    background: none;
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    outline: none;
    padding-left: 2px;
    width: 97%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editable div</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <div class="box" id="editbox">
            <div class="edit">Click Here To Edit Me.</div>
        </div>
        <div class="alert" id="alrt">You can now edit it</div>
    </div>
<script src="index.js"></script>
</body>

</html>

TypeError: Cannot read property 'value' of undefined - REACTJS

Since you are using AntD Menu.Item component. You must know that it doesn't pass back the event object as it is to the callback function on onClick event. Instead it passes an object with following keys: item, key, keyPath, domEvent

And since you want to set the item in state you can just use the key from the object

handleItem = ({key}) => {

    this.setState({
        item: key,
    })
    console.log('item: ', key)

}

how to fix the Uncaught TypeError: Cannot read property 'Value' of null

value should be in lower case. Thats why you get undefined when you get document for nameField node value. for nameField.

 let nameField = document.getElementById("nameField").value;

Uncaught Typeerror: Cannot Read Property 'Value' of Undefined

Uncaught TypeError: Cannot read property 'value' of undefined

Uncaught TypeError: Cannot read property 'value' of undefined at HTMLInputElement.anonymous

TypeError: Cannot read property 'value' of undefined - REACTJS

how to fix the Uncaught TypeError: Cannot read property 'Value' of null

Related Topics

Leave a reply