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.

How do I reset without using the reset button?

My project:
I'm doing the bookmark section in the Yandex Browser.
Image of my project:
I want to reset the two entered values ​​when I click the button. (I don't want to do that with the reset button. I don't want to use the form label.)
My codes:
$("#add").click(function(){
$("#siteName").val(" ");
$("#siteURL").val(" ");
});
Although he works here, he doesn't work in my project.
Since the codes are too long, I uploaded them here. Click to reach.

You are calling the addBookmark function on click, you can reset the values there.
function addBookmark(){
// set variables
var siteName = document.getElementById("siteName").value;
var siteURL = document.getElementById("siteURL").value;
document.getElementById("siteName").value = '';
document.getElementById("siteURL").value = '';
(EDIT)
or with JQuery
function addBookmark(){
// set variables
var siteName = document.getElementById("siteName").value;
var siteURL = document.getElementById("siteURL").value;
$("#siteName").val('');
$("#siteURL").val('');

Then you need import jquery to your project.
<input id="siteName" name="siteName"><input id="siteURL" name="siteURL"><button id="add">Click Me</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
<script type="application/javascript">
$("#add").click(function(){
$("#siteName").val("");
$("#siteURL").val("");
});
</script>

Simple JS Form; Cannot Find Submission Value

I'm new the JS and I'm having trouble storing and find the value of a form submission. I'm able to create a simple form (as shown below) but I'm not able to find the value of the submission to store for use later.
I thought I was able to access the for value here var number = document.getElementById('fib-form-number'); but I seem to have done something wrong.
I looked at this post here but that has not seemed to work.
I know the fix is going to be easy .. but I just can't figure it out.
Thanks,
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form/title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/index.js"></script>
</head>
<body>
<!-- <input id="input" type="submit" value="Submit" onclick="return submitted();"> -->
<!-- Use form to capture numbers on submission -->
<form id="fib-form">
<input type="number" id="fib-form-number" min="1">
<button type="submit">Submit</button>
</form>
</body>
</html>
JS
// Get value of submission
$(document).ready(function() {
var form = document.getElementById('fib-form');
var number = document.getElementById('fib-form-number');
// Now get the value of the submission
form.onsubmit = function () {
var variable = number.value;
console.log(variable)
}
});

You're misspelling variable:
var variable = number.value;
console.log(varaible)
But you could also use jQuery since you're already using it:
$(document).ready(function() {
var form = $('fib-form');
var number = $('fib-form-number');
// Now get the value of the submission
form.onsubmit = function () {
var variable = number.val();
console.log(variable)
}
});

Pass script tag value to input tag in html

I am trying to pass a particular variable value from the script tag to an input tag. But somehow it is not working.
I am trying to pass variable1 value from the below code from script tag to input tag.
So suppose variable1 value is John then this line in my code will look like this-
<input ONCLICK="window.location.href='some_url&textId=John'">
Below is the code
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
// some code
}
var variable1 = getUrlVars()["parameter1"];
var variable1 = unescape(variable1);
// some more code
</script>
<input ONCLICK="window.location.href='some_url&textId=variable1'">
</body>
</html>
Can anyone explain me what wrong I am doing?

Try it that way:
var variable1 = getUrlVars()["parameter1"];
variable1 = unescape(variable1);
document.getElementById('Apply').onclick = function() {
window.location.href = 'some_url&textID=' + variable1;
};
That attaches a function to the onclick event that exactly does what you want. For the initial input element simply remove the onclick attribute:
<input name="Apply" type="button" id="Apply" value="Apply" />

If you wish to perform inline functions, you need to wrap the code in an executable closure:
<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="(function() {window.location.href='your_data'})();">
As this can be largely unmaintainable, I recommend you abstract this functionality into a more organized place in your application.
(function(window, $, undefined) {
// assuming you use jQuery
$('#Apply').click(function() {
window.location.href = '';// your code
})
})(window, $);
I may be totally misunderstanding what you want to do, but I hope this helps.

The whole url parameters bit is surely unnecessary.
You can just set the value attribute in the field:
var field = document.getElementById('textfield');
var value = 'Some text';
field.addEventListener("click", function () {
this.setAttribute('value', value);
});
Here's a jsfiddle example: http://jsfiddle.net/LMpb2/

You have it inside the ' ' you need to add it into the string. So try
"window.location.href='some_url&textId='+variable1+';'"

I would change it to the following if your trying to bind the click handler to this input element:
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
// some code
}
var variable1 = getUrlVars()["parameter1"];
var variable1 = unescape(variable1);
document.getElementById("Apply").onclick = function() {
window.location.href='some_url&textId=' + variable1;
}
// some more code
</script>
<input name="Apply" type="button" id="Apply" value="Apply" >
</body>
</html>
I haven't tested it yet but it should work.

at onclick call a function, inside that function set window.locatio.href !
a sample
<script>
var url="www.google.com";
function myfunc(){
alert(url);
}
</script>
<input type="button" onclick="myfunc()" value="btn" >
http://jsfiddle.net/CgKHN/

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))