0

I'm working on my first Chrome extension and I still can't solve this problem. The idea behind my extension is simple. You type in an ID into the form and hit search. This triggers a new window popping up with a long URL. In the middle of this URL, you should see the ID that we typed into via the form. What happens instead is a new window is popping up, loading a long URL and instead of the number you can see "[object%20Event]". In other words, I want the ID submitted and merge it with two other strings - that all together constitute the URL.

Any ideas? Any help is much appreciated! Many thanks in advance!

HTML 

<head>
<script type="text/javascript" src="ChromeFacebook.js"></script>
</head>

<body>
<h1 id="title"> Enter ID: </h1>
<h2 id="paragraphs"> Comments </h2>

<form id="form1">
<input type="text" size="60" placeholder="Photos-commented"><input 
type="submit" value="Search">   
</form> 

</body>
</html>

JS

var id = document.getElementById('form1');

function a(id) {
window.open("https://www.facebook.com/search/str/" + id + "/photos-
commented", "a") 
{;

document.getElementById('form1').addEventListener('submit', a);
Lo1988
  • 95
  • 1
  • 1
  • 6
  • there's no element with id "num1" obviously – Kos Jan 20 '18 at 15:20
  • @Kos Thanks for your quick reply! Yes, you're right. I've changed it and it still gives me "Uncaught TypeError: Cannot read property 'addEventListener' of null at ChromeFacebook.js" the error refers to line 7 of my JS – Lo1988 Jan 20 '18 at 15:23
  • update your question with your changes then – Kos Jan 20 '18 at 15:25
  • 1
    I see, try putting your `ChromeFacebook.js` before `

    `

     – Kos Jan 20 '18 at 15:32
  • Possible duplicate of [Javascript: Uncaught TypeError: Cannot call method 'addEventListener' of null](https://stackoverflow.com/questions/9856140/javascript-uncaught-typeerror-cannot-call-method-addeventlistener-of-null) – Kos Jan 20 '18 at 15:32
  • I put ChromeFacebook.js before

    , however, whenever I click on the extension it automatically opens the URL without giving me a chance to type in a number. Also, thanks for the link - I willcheck it

     – Lo1988 Jan 20 '18 at 15:37
  • HI @Kos, after reading the link you sent me, I tried using document.addEventListener("DOMContentLoaded", function(event) { }); instead of jQuery. Still doesn/t work. I will try jQuery next. If you have another idea, please let me know! – Lo1988 Jan 20 '18 at 16:03
  • You are calling the `a` function instead of assigning it to the listener. In the last line, change `addEventListener("click",a(num1));` for `addEventListener("click",a);`. Consider also giving more meaningful names to functions and not naming global and local variables with the same name (in your case `num1`). One last thing: you may want to pass the function `a` the `textContent` of the form or the `value` of the `input` instead of the whole NodeElement. – Iván Nokonoko Jan 20 '18 at 18:48
  • @IvánNokonoko Thanks for your help! I revised the script accordingly. Please see updated code in original post: The problem is now that I can't pass the output of the form into the string in window.open(). Whenever I click on submit, the window opens, however, i can see in the URL - it says "/[object%20Event]" . Any idea how to solve this? – Lo1988 Jan 21 '18 at 11:45

1 Answers1

0

You are using the argument of your listener function to create the URL, but the argument of the listener function is an Event object. If you want to use the value of the first text input, that is what you need to state in your code. For example:

function myEventListener() {
  window.open("https://www.facebook.com/search/str/" + document.querySelector("#form1 input").value + "/photos-
commented", "_blank");
}

document.getElementById('form1').addEventListener('submit', myEventListener);
Iván Nokonoko
  • 4,088
  • 2
  • 11
  • 19