TypeError: Cannot read property 'value' of null

Coding Help
1

Here’s my code:

	var passlenght = document.getElementById("lenght").value;
	var one = Math.random(); + Math.random(); + passlenght;
    two = one.split("").reverse().join('')
    split = two.split("")
    three = split[1] + split[0] + split.slice(1).join("")
 
 	console.log(three)

And here’s my logs:
TypeError: Cannot read property 'value' of null
TypeError: one.split is not a function

What did i do wrong this time?

2

This isn’t spelled right, is this the name of the element? We might need some of your HTML to help debug.

3 
<!DOCTYPE html>
<html>
<head>
<!-- Import font from Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

<!-- Page styling -->
<style>
body {
  // Don't forget about the Google Font!
  font-family: 'Lato', sans-serif;
}
</style>

<!-- Page title -->
<title>Random Password Generator</title>
</head>
<body>

<!-- Page Heading -->
<h1>Random Password Generator</h1>
<p>This is a script that randomly generates a password for you to use.</p>

<input type="number" id="lenght" placeholder="Password length..."><button onclick="generate(lenght);">generate</button>

<script>
function generate() {
	var passlenght = document.getElementById("lenght").value;
	var one = Math.random(); + Math.random(); + passlenght;
    two = one.split("").reverse().join('')
    split = two.split("")
    three = split[1] + split[0] + split.slice(1).join("")
 
 	console.log(three)
}

generate();
</script>
</body>
</html>
4

you need a parameter to accept extra things to a function, so

var passlenght = document.getElementById(attr1).value;

and the beginning of the function like

function generate(attr1) {...}

and pass the id like

onclick="generate(length)"
2 Likes
5

TypeError: Cannot read property 'value' of null at generate

6

Can you show the Javascript code?

7 
  var passlength = document.getElementById(length).value;
	var one = Math.random(); + Math.random(); + passlenght;
    two = one.split("").reverse().join('')
    split = two.split("")
    three = split[1] + split[0] + split.slice(1).join("")
 
 	console.log(three)
}

generate();

Sorry if this is wrong, i don’t really understand.

8

uh huh buddy I think you need to add function generate(length) { to the top, and the onclick attribute should be onclick="generate('length')" (replace the ‘length’ portion to your id)

9

Yeah, i’ve already added the function generate(length) { thing, i just didn’t copy-paste the code into my post correctly :stuck_out_tongue:

And also these are my new logs after repeatedly trying to click the “generate” button:
ReferenceError: passlenght is not defined at generate
ReferenceError: passlenght is not defined at generate
ReferenceError: passlenght is not defined at generate
ReferenceError: passlenght is not defined at generate
ReferenceError: passlenght is not defined at generate
ReferenceError: passlenght is not defined at generate

10

What is the onclick attr for the button

11

onclick="generate('length')"

12

good first step on looking at the logs for a hint about what’s going wrong.

one important thing here is when you look at your logs, make sure you know what messages are from things going wrong with the current code and what messages were from previous runs about problems that you’ve fixed already. we can tell here that things are getting mixed up because script execution should stop at the first error, so you shouldn’t be getting two runtime errors from a “straight-line” piece of code on one invocation. so perhaps we should only look at the bottommost error about one.split. that part of the code with var passlenght = ... .value; looks fine, if unusually spelled.

so what is it about one.split? in practice, most is not a function tends to be cases where the value is undefined or something. I think that’s the case here. I’m pretty sure you’ve made some typos in the line before. try running the code snippet in your post through a sufficiently powerful code beautifier to get some hints on what’s going on. here’s one such one: http://www.jsnice.org/

'use strict';
var passlenght = document.getElementById("lenght").value;
/** @type {number} */
var one = Math.random();
+Math.random();
+passlenght;
two = one.split("").reverse().join("");
split = two.split("");
three = split[1] + split[0] + split.slice(1).join("");
console.log(three);

look what’s happened on lines 5 and 6 (I think you’ll just have to count them out. thanks, code formatting). +Math.random(); and +passlenght; are separate statements, with the ; separating them from the var one = ... coming before. [side note: if you’re wondering why +xxx; is not a problem, it’s a unary plus Unary plus (+) - JavaScript | MDN, and it’s fine to have a statement that’s just an expression]

incidentally, this beautifier has also annotated the type of var one, which it’s a number. number don’t have a split method, so one.split is undefined. undefined is not a function, so you can’t call it.

to recap the lessons in this question:

  1. find out which error messages are relevant to the current version of the code
  2. if something’s wrong with the code syntax but there’s no syntax error, try using a code beautifier to visualize how the code is being parsed in a not-correct-yet-not-erroneous way
  3. javascript allows some awkward things without crashing, so sometimes problem reporting gets delayed such that you end up with less relevant diagnostics. this you just gotta be aware of, and with experience, you’ll have some intuition of what problems lead to what error messages

anyway, if you don’t want feel like learning anything today, fix ...; + ... to be ... + ... and have a nice break

4 Likes
13

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.