We Keep Coding

Set a parameter when changing a button onclick function?

Yesterday I made this post: Button Function Working Without Click, trying to figure out why my code wasn't working for a document.getElementById("examplebutton").onclick = function();, but the problem is I can't set parameters on the function() because the parentheses would make the button auto-fire.
Does anyone know how to put parameters in a line of code similar to this:
<button id="button" onclick="function1">BIG BUTTON THING</button>
document.getElementById("button").onclick=function2
(I would want the parameter set to be for function 2)?

What you need is a closure. Just wrap you function call into another one.
var myButton = document.getElementById("examplebutton");
myButton.onclick = function(){
myButtonFunction('some parameters');
};
function myButtonFunction(param){
console.log(param);
}

Save and open the content of a textarea

i'm working on a text editor as part of a school project and i'm having a small issue with my save and open code.
Here are my buttons:
<button id="gu" onclick="save()">Save</button>
<button id="ab" onclick="open()">Open</button>
Here's my textarea:
<textarea name="comment" rows=30 cols=101 id="texto"></textarea>
And here's my javascript functions:
function save(){
gu = document.getElementById("texto");
localStorage.setItem("texto",gu);
console.log(texto+"="+gu);
}
function open(){
console.log("Abierto")
document.getElementById('texto').innerHTML=gu;
}
My goal is that if write something and then press the "save" button, the content inside my textarea is saved, and if i press the "open" button it shows what i wrote on the textarea.
Any idea on how to fix my code?
Sorry if my english is bad.

Here you go: https://jsfiddle.net/cinerobert/qwgv18r5/
function save()
{
localStorage.setItem("someitem", document.getElementById("texto").value);
document.getElementById("texto").value = "";
console.log(texto + "=" + gu);
}
function retrieve(){
console.log("Abierto")
document.getElementById("texto").value = localStorage.getItem("someitem");
}
You can't use open() as a function name because it's already a built-in function in javascript, so I changed it to retrieve(). See here: http://www.w3schools.com/jsref/met_win_open.asp
Is there some reason you're required to use setItem()? Using a variable (gu) and setItem is redundant. It would work either way.
Also to get and set the text inside a text area I you need to use value().
I also changed the save() function so that it clears the textbox, so that you can see something happen when you click retrieve().

Below are the things need to be done
function save()
{
gu = document.getElementById("texto");
localStorage.setItem("texto",gu.innerText); //here you were saving the dom object not the text inside
console.log(texto+"="+gu.innerHTML);
}
function open()
{
console.log("Abierto")
document.getElementById('texto').innerHTML=localStorage.getItem("texto"); //here you need to get the text from your local storage
}

Uncaught ReferenceError: printProducts is not defined [duplicate]

This question already has an answer here:
jsFiddle: no connection between html and js? Can't call simple function from button? [duplicate]
(1 answer)
Closed 6 years ago.
I keep getting this error when i inspected the element of my button. The button is suppose to give a print view to page.
HTML Code:
<button class = "hidden-print" onclick = "printProducts()">Print Products</button>
Javascript Code:
function printProducts(){
window.print();
}
Attached here is my code live in jsFiddle:
https://jsfiddle.net/PochMendoza/scj0q0dk/

"In JSFiddle, when you set the wrapping to "onLoad" or "onDomready", the functions you define are only defined inside that block, and cannot be accessed by outside event handlers."
Easiest fix is to change:
function something(...)
To:
window.something = function(...)
---Niet The Dark Absol
For your example, you want to define the onclick method of a button. That's really easy with JavaScript, we just need to give the button an id in the HTML, so that we can find it in our JavaScript code.
Change this:
<button class = "hidden-print" onclick = "printProducts()">Print Products</button>
To this:
<button id="myButton" class="hidden-print">Print Products</button>
Note that we no longer need the onclick="printProducts()" part anymore.
Now we need to set the printProducts function to run when the button is clicked. This can be done like so:
document.getElementById('myButton').onclick = printProducts;
Start edit
This code needs to be placed in the onload function though, to properly run.
Do that like so:
window.onload = function() {
document.getElementById('myButton').onclick = printProducts;
}
End edit
And the printProducts function remains the same.
Working JSFiddle
document.getElementById('myButton').onclick = printProducts;
function printProducts(){
window.print();
}
<button id="myButton" class="hidden-print">Print Products</button>

Getting the contents of a span to change as I change a number input

I had a more complicated form working a couple of days ago, but suddenly it stopped working and I'm rubbish at saving versions, so I've taken it right back to basics, and I can't get it to work. What am I doing wrong? Am I using onInput incorrectly?
<input type="text" id="number-of-copies-value" onInput="quote()" value="500">
<span id="total-cost-value">0.00</span>
And here's the Javascript:
function quote() {
var totalcostvalue = document.getElementById("total-cost-value");
var numberofcopiesvalue = document.getElementById("number-of-copies-value").value;
var totalcost = (+numberofcopiesvalue);
totalcostvalue.innerHTML=totalcost.toFixed(2);
}
quote();
https://jsfiddle.net/tod0wusv/1/

Your HTML expects the quote() function to be globally available. Make sure that is the case.
If I change your fiddle to have quote() available on global window object like,
window.quote = function quote() {
// ...
};
the fiddle starts working again.
WORKING FIDDLE
If I create a local HTML file with your content, it works right away, which makes sense since quote() is defined on global scope.
Looks like JSfiddle executes the JavaScript in a function scope which breaks your quote() call.

If you care about browser compatibility I would suggest using the onkeydown event with a setTimeout function as described here Detecting "value" of input text field after a keydown event in the text field?
To make this work in JSFiddle, change the javascript "load type" setting in your JavaScript settings to one of the "no wrap" options.
HTML
<input type="text" id="number-of-copies-value" onkeydown="window.setTimeout(function() { quote(); }, 1)" value="500">
<span id="total-cost-value">0.00</span>
JavaScript:
function quote() {
var totalcostvalue = document.getElementById("total-cost-value");
var numberofcopiesvalue = document.getElementById("number-of-copies-value").value;
var totalcost = (+numberofcopiesvalue);
totalcostvalue.innerHTML = totalcost.toFixed(2);
}
quote();
I've updated your JSFiddle...
https://jsfiddle.net/tod0wusv/6/

JS Button - random font

<div id="fontfamily">test
</div>
<button onclick="myFunction()">Try it</button>
var fontType = [ "Arial", "Verdana", "Courier"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").style.fontFamily =fontType[num];
console.log(num);
function myFunction() {
var x = document.getElementById("fontfamily").name;
document.getElementById('myFunction()').innerHTML = x;
}
i dont know what not working. my goal is that in every time that i press the button the font change.
tnx!

There are many things wrong in your code, so let's review them one at a time.
First, onclick="myFunction()" runs myFunction when you click on the button, but it doesn't run the lines which aren't in the function. Your randomization code is before the function, so it is executed once, when the page loads.
Depending on where you put that code (such as in a script tag in the head), the page might not have loaded. This means the document.getElementById function will fail because the elements haven't loaded yet. That might be another reason why it's not working.
var x = document.getElementById("fontfamily").name;
document.getElementById('myFunction()').innerHTML = x;
This tries to get the name attribute of the div. There's no name attribute on that div, so it will fail. Next you're trying to get an element where the id is equal to myFunction(). That doesn't make any sense. myFunction() isn't an id on an element. I don't know what you were trying, so I just got rid of most of the useless code.
Here's the solution, simply done by moving the needed code inside the function.
var fontType = ["Arial", "Verdana", "Courier"];
function myFunction(e) {
document.getElementById("fontfamily").style.fontFamily = fontType[Math.floor(Math.random() * fontType.length)];
}
<div id="fontfamily">test</div>
<button onclick="myFunction(event)">Try it</button>