Develop Reference

How do I give parameters to a function in a javascript file that accesses HTML and CSS attributes?

I am trying to pass html parameters to a function in a javascript file, I tried it like this:
function func(element, value) {
element.getElementById('myelement').InnerHTML = value;
}
and then something like this:
<button type="button"
onclick="script.js.func(document, 'example')">Click Me!</button>
<p id="myelement"></p>
But it doesn't work. I'm fairly new to JavaScript so sorry if I'm not as good.
I know that script.js.anything probably wouldn't work, but I don't know how to do it.

Rather than using the HTML onclick attribute, you can use JavaScript Event Listeners:
var button = document.getElementById("mybutton");
var paragraph = document.getElementById("myelement");
function func(value) {
paragraph.innerHTML = value;
}
button.addEventListener("click", function() {
func("incredible value here");
});
<button id="mybutton">Click me!</button>
<p id="myelement"></p>
If you need to specify the parameters in the HTML itself, you can specify them with a data- attribute:
var button = document.getElementById("mybutton");
var paragraph = document.getElementById("myelement");
function func(value) {
paragraph.innerHTML = value;
}
button.addEventListener("click", function() {
var value = button.getAttribute("data-value");
func(value);
});
<button id="mybutton" data-value="some value">Click me!</button>
<p id="myelement"></p>

If the JavaScript file is included in the head of your HTML, you should be able to just call it like this:
<button type="button"
onclick="func('Testing')">Click Me!</button>
<p id="myelement"></p>
Now, as far as passing parameters into the call, you can pass things like strings, numbers, etc no problem. If you want to pass in the "document", as in your example, I would actually recommend to do that inside the JavaScript function, instead of passing it in.
function func(value) {
document.getElementById('myelement').InnerHTML = value;
}
And your HTML:
<button type="button"
onclick="func('Testing')">Click Me!</button>
<p id="myelement"></p>
In your case, using vanilla JS, I think this can resolve your issue.

I think I understand what you are trying to do with this code
<button type="button" onclick="script.js.func(document, 'example')">Click Me!</button>
You are trying to load the script.js file and then the function inside it which is func.
For that in JavaScript you have to load the file first and then you can use the JavaScript functions. Something like this:
<script type="text/javascript" src="script.js"></script> <!-- Assuming the js file is on same level as the index.html file -->
<button type="button" onclick="func(document, 'example')">Click Me!</button>
On a fundamental level, this should work. If you want to refactor or clean your code have a look at other answers.

Cannot read property 'addEventListener' of null for to do list [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm trying to make to do list but keep getting TypeError: Cannot read property 'addEventListener' of null. I moved my script file to the bottom of the body tag and still get the error. I also tried putting it at the top and using defer and that didn't work. I tried using If(todoBTN) { todoBTN.addEventListener('click', addTodo) and it got rid of the error but when I ran a console.log test I didnt't see it get logged.
const todoBTN = document.querySelector('addtodo-btn')
const inputTodo = document.querySelector('todo-input')
const todoList = document.querySelector('todo-list')
const form = document.querySelector('form')
todoBTN.addEventListener('click', addTodo)
form.addEventListener('submit' , event => {
event.preventDefault();
})
function addTodo() {
// Create Div
const divTodo = document.createElement('div')
divTodo.classList.add('itemsDiv')
// Create To Do Item
const todoItem = document.createElement('li')
todoItem.innerText = inputTodo.value;
divTodo.appendChild(todoItem)
todoList.appendChild(divTodo)
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>To do List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous">
</head>
<body>
<h2>To Do List</h2>
<form class="form">
<input type="text" class="todo-input">
<button class="addtodo-btn" type="submit"><i class="fas fa-plus"></i></button>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="app.js"></script>
</body>

For class selector use . with in queryselector.See usage here
const todoBTN = document.querySelector('.addtodo-btn') // use . here for class
Same for others as well
const inputTodo = document.querySelector('.todo-input')
const todoList = document.querySelector('.todo-list')
const form = document.querySelector('.form')

You forget to add (.) in front of class name.

Getting a 'cannot set property 'onclick' Error' [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I am a beginner in Javascript. I am doing some exercises and coming across the error listed above for the 'onclick'.
I have looked at other questions on this forum and it has not be helpful for me. I have looked over syntax numerous times in both my html and JS and can't find anything!
var item1;
var item2;
var item3;
document.getElementById("changeList").onclick = newList;
function newList() {
item1 = prompt("Enter a new first thing:");
item2 = prompt("Enter a new second thing:");
item3 = prompt("Enter a new third thing:");
updateList();
}
function updateList() {
document.getElementById("firstThing").innerHTML = item1;
document.getElementById("secondThing").innerHTML = item2;
document.getElementById("thirdThing").innerHTML = item3;
}
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Practice</title>
<script src="main.js"></script>
</head>
<body>
<h1 id="myName">Angie</h1>
<hr>
<p id="aboutMe"><em>I am trying to learn this damn javascript and stick with it.</em></p>
<h2>Things I like</h2>
<p>Here are some of the things I like to do:</p>
<ul>
<li id=firstThing>Dance</li>
<li id=secondThing>Write</li>
<li id=thirdThing>Travel</li>
</ul>
<button id="changeList" type="button">Change Your List</button>
</body>
</html>

You can try placing your script tag at the bottom of the page as suggested by lealceldeiro or you can wait for the DOM to load fully before adding your event listener for onclick like so:
//Replace this line
document.getElementById("changeList").onclick = newList;
//With the following, this fires an event when the DOM has fully loaded
//This will ensure your element has been rendered into the DOM
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("changeList").onclick = newList;
});

Try changing your html line to :
<button id="changeList" type="button" onclick = newList();>Change Your List</button>
and remove this line from your JS
document.getElementById("changeList").onclick = newList;

How to access functions in javascript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
Code:
<html>
<body>
<script>
function mmm(x){
var val= [10,20,30];
return val;
}
</script>
<script>
function my(){
var va= mmm();
var b= va[1];
document.write(b);
}
</script>
</body>
</html>
there is a mistake in the above code, output is not generated. What I need is to display contents of 'val' of 'mmm(x)' function inside 'my()' function using document.write().
The two functions should be in different script tags. What are the changes do I need to make?

That's because you are not calling my function anywhere.
Try this.
<html>
<body>
<script>
function mmm(x){
var val= [10,20,30];
return val;
}
</script>
<script>
function my(){
var va= mmm(1);
var b= va[1];
document.write(b);
}
</script>
</body>
<button onclick="my()">click</button>
</html>
What I have done here I have a page having a button, and when you will click on that button, it will call that my function, and you will get 20 on your page.

You are not calling the function my
<html>
<body>
<script type="text/javascript">
function mmm(x){
var val= [10,20,30];
return val;
}
</script>
<script type="text/javascript">
function my(){
var va= mmm();
var b= va[1];
document.write(b);
}
my();
</script>
</body>
</html>

Try this code:
<script>
function mmm(){ //unwanted parameter is removed
var val= [10,20,30];
return val;
}
</script>
<script>
function my(){
var va= mmm();
var b= va[1];
document.write(b);
}
my();//calling method here
</script>
DEMO

Using the GetElementByClassName and GetElementById

I want to print variables in the same paragraph but on different lines. I was using this:
<p id="demo1"></p><p id="demo2"></p><p id="demo3"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
document.getElementById("demo1").innerHTML=lastname;
document.getElementById("demo2").innerHTML=age;
document.getElementById("demo3").innerHTML=job;
}
</script>
but it prints each value in a new paragraph. I tried changing to classname instead but I'm doing something wrong. Help me please. TY.
<p class="demo1, demo2, demo3"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
document.getElementByClassName("demo1").innerHTML=lastname;
document.getElementByClassName("demo2").innerHTML=age;
document.getElementByClassName("demo3").innerHTML=job;
}
</script>
Also can you use
document.getElementById("demo1").innerHTML=lastname;
and more then one id and value at then end? Something like this?
document.getElementById("demo1,demo2,demo3").innerHTML=lastname,age,job;
How can you read that correctly, I know the above not valid, but what is the correct method to do it?
Ty
Jared Moore

<p id="demo1"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
var concat = lastname + '<br />' + age + '<br />' + job
document.getElementById("demo1").innerHTML=concat;
}
</script>

The reason that the three parts are in three different paragraphs is that you have three p elements. If you want all the values to be in the same paragraph, you should use an inline element, such as span. This is what it would look like:
<p><span id="demo1"></span><span id="demo2"></span><span id="demo3"></span></p>
By the way, using innerHTML is asking for someone to hack your site; if your real code looks anything like this:
element.innerHTML = userSuppliedData
then anyone can run whatever JavaScript they want on your page by passing this:
<script type="text/javascript">
alert('All your site are belong to us.');
</script>
This is known as cross-site scripting, XSS. Instead, do this:
element.appendChild(document.createTextNode(userSuppliedData))