Console log data return as null

Question

Sorry for the little explanation. So i have already done my chrome extension and i already have a save data in my localstorage which is FirstName. so now the getElementById is the one suppose to web scape my current page that i am on to fill up the form when i click START which is button1 Hopefully these clear things

i have also provided my index.html where if i click start it should execute injector.js

index.html

<!DOCTYPE html>
<html>

<head>
 <link rel="stylesheet" href="style.css">
 <style>
  html,
  body {
   height: 200px;
   width: 400px;
  }
 </style>
 
</head>

<body>
 <h1>Adidas ACO</h1>
 <h2>Select your choice</h2>
 <button><a href="./home.html" target="_blank">Go for Setup</a></button>
 
 <button id="buttonstart"><script src="injector.js"></script>
 </script>START</button>
 <!-- <br>
 <br>
 <label for="Title">Title</label>
 <input type="text" id="firstnametitle" name="title" size="50" value=""/> -->


 <!--<script scr="injector.js"></script>-->
 <!--<button onclick="fillforms(fillup)">Start</button>-->
</body>
</html>

injector.js

// Get my button and localstorage data
var button1 = document.getElementById("buttonstart");
var firstName = localStorage.getItem('First Name');
var lastName = localStorage.getItem('Last Name');
var address1 = localStorage.getItem('Address 1');
var address2 = localStorage.getItem('Address 2');
var email = localStorage.getItem('Email');
var phoneNumber = localStorage.getItem('Phone Number');

/// When button is click, it will webscape and fill up 
button1.onclick = function(){
 var firstName = localStorage.getItem('First Name');
 var field1 = document.getElementsByClassName("shippingAddress-firstName");
 fillField(field1, firstName);

 console.log(field1)
 console.log(firstName)
 
}

function fillField(field1, value){
 if(field1){
  field1.value = value;
 }
}

Picture to my console values

Seems like field1 (`input[id="shippingAddress-firstName"]`) doesn't exist. — Simone Rossaini, Jul 26 '21 at 06:43
I second @SimoneRossaini, also why not make the selector just #shippingAddress-firstName instead of 'input[id=..]'? — Santhos Ramalingam, Jul 26 '21 at 07:07
alright sure guys cause i was doing some testing and still doesnt work hold on — JustAnotherProgrammer, Jul 26 '21 at 08:28
@SimoneRossaini so field1 is suppose to webscape my page and find the ID and fill in my data if you know what i mean? — JustAnotherProgrammer, Jul 26 '21 at 08:40
The only suggest i can say now is to try to paste all your code into a `window.addEventListener('DOMContentLoaded', function () { PASTE HERE });` and change into `document.querySelector('#shippingAddress-firstName');` — Simone Rossaini, Jul 26 '21 at 08:43
I already tried that and it still doesnt work though. the queryselector all is not a problem. Its just asking the Chrome Extension to web scrape the page to find the class and fill in and idk how to ask the Chrome extension to web scrape the loaded page @SimoneRossaini — JustAnotherProgrammer, Jul 26 '21 at 09:32
Try to see [here](https://stackoverflow.com/questions/6508393/web-scraping-in-a-google-chrome-extension-javascript-chrome-apis) — Simone Rossaini, Jul 26 '21 at 11:28

score 0 · Answer 1 · answered Jul 26 '21 at 06:51

0

Declare the variables firstname and field1 at the start of the file.You have to do it because in your code you can only use those variables inside the button1.onclick function since you have declared them there.

answered Jul 26 '21 at 06:51

Pratham

11
4

But he only uses the variables inside the onclick, no need to make them global. – Reyno Jul 26 '21 at 06:53
so basically its a Chrome Extension and it is suppose to fill up the form when i click "Start" which is button1. it is suppose to take my data from my localstorage of the page and fill the form. @Reyno – JustAnotherProgrammer Jul 26 '21 at 08:37
You forget to set the class attribute to the input I think. Also why have you have commented some code? – Pratham Jul 29 '21 at 04:02

Console log data return as null

1 Answers1