I just want to show the result in this div ,i tried to use nodeValue instead value and call the finalCalc fun in js file but it show nothing when i click on the button.
var billValue=document.getElementById("dollars").value,
peopleValue=document.getElementById("people").value,
theResult=document.getElementById("result"),
calculateButton=document.getElementById("calculateButton");
function calculateTip(x,y){
var reso=x*y;
theResult.innerHTML=reso;
}
function finalCalc() {
calculateTip(billValue,peopleValue);
}
<form>
<label>how much was your bill?</label>
<label for ="dollars">$</label>
<input value ="0" type="text" id="dollars" placeholder="Bill Amount ">
<br>
<label for="people">How many people are sharing the bill?</label>
<input value ="0" type="text" id="people">
<button type="button" id="calculateButton" onclick()="finalCalc()">CALCULATE</button>
<div id="result"></div>
</form>
onClick is written as onClick="" instead of onclick()="", reworked your code a little, hope this helps.
var billValue = document.getElementById("dollars").value,
peopleValue = document.getElementById("people").value,
theResult = document.getElementById("result"),
calculateButton = document.getElementById("calculateButton");
function calculateTip(x, y) {
return x * y;
}
function finalCalc() {
theResult.innerHTML = calculateTip(billValue, peopleValue);
}
<button type="button" id="calculateButton" onClick="finalCalc()">CALCULATE</button>
I'm trying to understand how to tie code and webpages together and stuff, so I mocked up this basic HTML page to add two numbers together using Javascript.
const first_n = document.getElementById("fnumber")
const second_n = document.getElementById("snumber")
window.onload = function solve(first_n, second_n) {
var solved = first_n + second_n;
document.getElementById("solution").innerHTML = solved
}
<body>
<form action="javascript:solve()">
<label for="fnumber">First n:</label><br>
<input type="number" id="fnumber"><br>
<label for="snumber">Last n:</label><br>
<input type="number" id="snumber">
<input type="submit" value="Solve">
</form>
<p id="solution"></p>
</body>
I know my nomenclature is a mess, don't judge. I just wanna see what I can get to work.
Thoughts on why this isn't working?
You need to call the solve function on click of the submit button. Secondly get the value of the input element inside the function
function solve(e) {
e.preventDefault();
const first_n = document.getElementById("fnumber").value
const second_n = document.getElementById("snumber").value
var solved = Number(first_n) + Number(second_n);
document.getElementById("solution").innerHTML = solved
}
<form>
<label for="fnumber">First n:</label><br>
<input type="number" id="fnumber"><br>
<label for="snumber">Last n:</label><br>
<input type="number" id="snumber">
<input type="submit" value="Solve" onclick='solve(event)'>
</form>
<p id="solution"></p>
The window.onload event runs only once and that is when the page loads. At this time, the user has probably not entered any data, hence your fnumber and snumber will not contain any user entered values.
It would be better to trigger your solve function differently, for example associated with a button click via event listener or html on<> attributes
I have checked your code, please find the below fix.
const first_n = document.getElementById('fnumber');
const second_n = document.getElementById('snumber');
function solve() {
var solved = parseFloat(first_n.value) + parseFloat(second_n.value);
document.getElementById('solution').innerHTML = solved;
}
In your code you are not getting the input Values.
You will call the solve function when you click on the submit button and not on page load.
Solution
You need to convert the input values from a string to a number. by default the input values are stings.
const solve = e => {
e.preventDefault()
const firstNumber = Number(document.querySelector('#fnumber').value)
const secondNumber = Number(document.querySelector('#snumber').value)
document.querySelector('#solution').innerText = firstNumber + secondNumber
}
<form>
<label for="fnumber">First n:</label><br>
<input type="number" id="fnumber"><br>
<label for="snumber">Last n:</label><br>
<input type="number" id="snumber">
<input type="submit" value="Solve" onclick='solve(event)'>
</form>
<p id="solution"></p>
Example of input default data type (default is string)
console.log(document.querySelector("#data").value, typeof(document.querySelector("#data").value))
<input type="number" id="data" value="3">
Even when the input type is type="number" the datatype will be a string.
Bonus
You can declare the solve() function on window.onload if you use an arrow function (=>) to declare it, it will not work if you declare the function using a normal function declare (function solve() { ... }).
window.onload = solve = (e) => {
e.preventDefault()
const firstNumber = Number(document.querySelector('#fnumber').value)
const secondNumber = Number(document.querySelector('#snumber').value)
document.querySelector('#solution').innerText = firstNumber + secondNumber
}
<form>
<label for="fnumber">First n:</label><br>
<input type="number" id="fnumber" value="3"><br>
<label for="snumber">Last n:</label><br>
<input type="number" id="snumber" value="5">
<input type="submit" value="Solve" onclick='solve(event)'>
</form>
<p id="solution"></p>
This has the benefit of running once the window is loaded so as you can see we have set the values of the inputs by default to be 3 and 5 once the example loads it will calculate them without clicking the solve button.
As per title I have three plus/minus buttons, the three buttons have to be independent from each other i.e when one is clicked the output in the other two is not affected. All three need to show their total output in the two stand alone outputs.
I've researched this and tried some trial and error stuff with no luck as yet. I hope I've explained myself OK, Pen here https://codepen.io/anon/pen/RjeGQy and code below. I can use jquery if that helps.
<input type="text" value="0" class="count"><br><br>
<input type="text" value="0" class="count"><br><br>
<input type="button" value="-" onclick="minus()">
<input type="text" value="0" class="count">
<input type="button" value="+" onclick="plus()"><br><br>
<input type="button" value="-" onclick="minus()">
<input type="text" value="0" class="count">
<input type="button" value="+" onclick="plus()"><br><br>
<input type="button" value="-" onclick="minus()">
<input type="text" value="0" class="count">
<input type="button" value="+" onclick="plus()">
var count = 1;
var countEl = document.querySelectorAll(".count");
function plus(){
count++;
countEl.value = count;
}
function minus(){
if (count > 1) {
count--;
countEl.value = count;
}
Update
Thanks for your answers so far. To clarify what I'm trying to achieve as it's quite complex to explain:
The three button/counters could at anytime have three different outputs, say 1 2 3 totalling 6, that 6 needs to be shown in the two standalone counters with this number being added to or taken away from every time the button/counters are used.
Update1
New code and Pen, please see my comment below
<input type="number" name="quantity1" value="0">
<input type="number" name="quantity1" value="0"><br><br><br>
<input type="button" class="" data-quantity="minus" data-field="quantity1" value="-">
<input type="number" name="quantity1" value="0">
<input type="button" class="" data-quantity="plus" data-field="quantity1" value="+">
<input type="button" class="" data-quantity="minus" data-field="quantity2" value="-">
<input type="number" name="quantity2" value="0">
<input type="button" class="" data-quantity="plus" data-field="quantity2" value="+">
<input type="button" class="" data-quantity="minus" data-field="quantity3" value="-">
<input type="number" name="quantity3" value="0">
<input type="button" class="" data-quantity="plus" data-field="quantity3" value="+">
jQuery(document).ready(function() {
// This button will increment the value
$('[data-quantity="plus"]').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr("data-field");
// Get its current value
var currentVal = parseInt($("input[name=" + fieldName + "]").val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$("input[name=" + fieldName + "]").val(currentVal + 1);
} else {
// Otherwise put a 0 there
$("input[name=" + fieldName + "]").val(0);
}
});
// This button will decrement the value till 0
$('[data-quantity="minus"]').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr("data-field");
// Get its current value
var currentVal = parseInt($("input[name=" + fieldName + "]").val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$("input[name=" + fieldName + "]").val(currentVal - 1);
} else {
// Otherwise put a 0 there
$("input[name=" + fieldName + "]").val(0);
}
});
});
https://codepen.io/anon/pen/NwOLNL
Instead of using querySelectorAll to find every element of the class count, I would give each input box an ID such as "input1", "input2", "input3".
Then I would change the plus and minus functions to accept a parameter to indicate which row it was from.
Finally, I would update the correct input with the new value.
It would look something like this:
<input type="button" value="-" onclick="minus(1)">
<input type="text" value="0" class="count" id="input1">
<input type="button" value="+" onclick="plus(1)"<br><br>
function minus(int row){
var inputElem = document.getElementById("input" + row.ToString());
inputElem.value--;
}
As you've tagged this jQuery, I'm using jQuery to facilitate some parts. And I'm not sure why you'd need to output the same data to multiple locations, but that should be pretty painless too.
EDIT NOTE: You indicate in your comment that you want the three fields to sum (add all three values) rather than concatenate (create a string of all three values). That's actually a very minor change, simply change the processing within the loop where we iterate over all the plusMinusWidgets. It's a matter of removing the comma line, and changing how we combine the fields into the resultEl field -- by default, they're treated as a string. I've edited the code to cast (force) them into a Number value, and add them to the current resultEl field (which I also cast into a Number value).
var resultEl = $(".resultSet");
$(".plusMinusThing").on("click", ".minusBtn", function(){
var currentWidget = $(this).parents(".plusMinusThing");
var countEl = currentWidget.find(".count");
countEl.val(Number(countEl.val())-1);
countEl.trigger("change");
}).on("click", ".plusBtn", function(){
var currentWidget = $(this).parents(".plusMinusThing");
var countEl = currentWidget.find(".count");
countEl.val(Number(countEl.val())+1);
countEl.trigger("change");
}).on("change keyup", ".count", function(){
resultEl.val("");
/******
* This is the only piece changed in order to sum the fields,
* rather than concatenate them. I've removed the comma,
* and I've cast the element values to numbers, then added.
******/
$(".plusMinusThing").each(function(index, element){
// Set the value of the resultEl to itself plus the next
// count el. Note it will work if the value is negative.
resultEl.val( Number(resultEl.val() ) + Number($(element).find(".count").val() ) );
})
})
fieldset {
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="results">
<input type="text" class="resultSet" />
</fieldset>
<hr/>
<fieldset class="plusMinusThing">
<input type="button" class="minusBtn" value="-">
<input type="text" value="0" class="count">
<input type="button" class="plusBtn" value="+">
<br>
</fieldset>
<fieldset class="plusMinusThing">
<input type="button" class="minusBtn" value="-">
<input type="text" value="0" class="count">
<input type="button" class="plusBtn" value="+">
<br>
</fieldset>
<fieldset class="plusMinusThing">
<input type="button" class="minusBtn" value="-">
<input type="text" value="0" class="count">
<input type="button" class="plusBtn" value="+">
<br>
</fieldset>
Much the same thing is an option without jQuery, although it is a bit more complicated. The following presents much the same functionality. Biggest difference is that I don't output to multiple target els. Otherwise, it handles much the same.
// Store references that all functions can use.
var resultEl = document.querySelector(".resultSet"),
plusMinusWidgets = document.querySelectorAll(".plusMinusThing");
// Attach the handlers to each plus-minus thing
for (var i = 0; i < plusMinusWidgets.length; i++) {
plusMinusWidgets[i].querySelector(".minusBtn").addEventListener("click", clickHandler);
plusMinusWidgets[i].querySelector(".plusBtn").addEventListener("click", clickHandler);
plusMinusWidgets[i].querySelector(".count").addEventListener("change", changeHandler);
}
/*****
* both plus and minus use the same function, but value is set by the class of the
* button
*****/
function clickHandler(event) {
// reference to the count input field
var countEl = event.target.parentNode.querySelector(".count");
if (event.target.className.match(/\bminusBtn\b/)) {
countEl.value = Number(countEl.value) - 1;
} else if (event.target.className.match(/\bplusBtn\b/)) {
countEl.value = Number(countEl.value) + 1;
}
// When we programmatically change the value, we need to manually trigger
// the change event.
triggerEvent(countEl, "change");
};
/*****
* changeHandler() processes whenever a plusMinusWidget's count el is changed.
* It iterates over all plusMinusWidgets, gets their count, and outputs that
* to the given resultEl input field.
*****/
function changeHandler(event) {
// remove all value from the result el.
resultEl.value = 0;
/******
* Here is the only functional change, per your comment. Rather
* concatenating a string, you want to sum values of the
* plusMinusWidget. To do this, we need to cast the value of each
* plusMinusWidget to a Number value, and add that to the Number
* value of the resultEl.
*****/
for (var i = 0; i < plusMinusWidgets.length; i++) {
// Add the current plusMinusWidget value to the resultEl value.
resultEl.value = Number(resultEl.value) + Number(plusMinusWidgets[i].querySelector('.count').value);
}
};
/*****
* triggerEvent() -- function to trigger an HTMLEvent on a given element.
* similar to jquery's trigger(), simply a convenience function. Not the
* point of this exercise.
*****/
function triggerEvent(el, type){
if ('createEvent' in document) {
// modern browsers, IE9+
var e = document.createEvent('HTMLEvents');
e.initEvent(type, false, true);
el.dispatchEvent(e);
} else {
// IE 8
var e = document.createEventObject();
e.eventType = type;
el.fireEvent('on'+e.eventType, e);
}
}
fieldset {
border: 0;
}
.plusMinusThing {
display: block;
width: 206px;
padding: 0;
border: 1px solid #ccc;
}
.plusMinusThing input {
float: left;
margin: 0;
border: 0;
}
<fieldset class="results">
<input type="text" class="resultSet" />
</fieldset>
<fieldset class="plusMinusThing">
<input type="button" class="minusBtn" value="-">
<input type="text" value="0" class="count">
<input type="button" class="plusBtn" value="+">
<br>
</fieldset>
<fieldset class="plusMinusThing">
<input type="button" class="minusBtn" value="-">
<input type="text" value="0" class="count">
<input type="button" class="plusBtn" value="+">
<br>
</fieldset>
<fieldset class="plusMinusThing">
<input type="button" class="minusBtn" value="-">
<input type="text" value="0" class="count">
<input type="button" class="plusBtn" value="+">
<br>
</fieldset>
The point of all this, either way, is that the complex element represented by plusMinusWidget (the fieldSet containing the plusBtn, the minusBtn and the count input) should be self-contained. I don't want to have to try to figure which button refers to what element -- the buttons are part of the complex elements, and they refer to their own count input. Try to use the DOM hierarchy to make your life easier, whenever possible.
**EXTRA CREDIT: Because I'm a fan of simplifying, I wanted to create this same effect with objects. The advantage to this approach is, I can create a PlusMinusWidget, and then create as many instances of it as I like. The page designer doesn't have to be aware of my programmatic elements, she simply has to create a container for them. The following code would handle everything else.
/******
* Constructor for my plusMinusWidget complex input element.
* At this point, it contains two functions:
* -- __init() initializes the DOM elements and the event listeners for
* the current PlusMinusWidget. The double-underscore is a
* lazy attempt at hiding the function.
* -- getHtml() returns the DOM content, so we can append that into
* the DOM itself.
*
* It is designed to be used within a containing element, as i use that
* to handle the recalculation event. I don't want the PlusMinusWidgets
* to have to be aware of much. Ideally, I would have created a container
* complex widget to handle the event listening for the recalculate
* event, but this was purely a prototype. More refinement is always
* an option.
******/
var PlusMinusWidget = function(id){
// when the new PlusMinusWidget gets created, we
// create the DOM node containing everything, and then
// we initialize the DOM content and the listeners.
this.DOMEl = $("<fieldset>").addClass("plusMinusWidget");
this.__init(id);
};
$.extend(PlusMinusWidget.prototype, {
// init() gets called above, when we create the DOM structure and
// set up the listeners.
__init: function(id){
// create a reference to the DOMEl. This isn't necessary for creating
// the structures, but within the listeners, we can't use 'this.DOMEl'
// as the value of 'this' has changed. Thus, we create a reference here.
var domEl = this.DOMEl;
// If we don't get an ID, we don't want to error out, so set it to "".
var id = id || "";
// The three DOM components that will be part of the PlusMinusWidget
var minusEl = $("<input>")
.addClass("minusBtn")
.attr("type", "button")
.val("-");
var valueEl = $("<input>")
.addClass("quantity")
.attr("type", "text")
.val("0");
var plusEl = $("<input>")
.addClass("plusBtn")
.attr("type", "button")
.val("+");
// set the ID of the PlusMinusWidget, and insert the DOM els.
domEl.attr("id", id).append(minusEl, valueEl, plusEl);
/*****
* Setting up the listeners. There are three events that
* are integral to this PlusMinusWidget, and one that is
* more external and could be handled elsewhere.
* .minusBtn.click
* .plusBtn.click
* .quantity.change / .quantity.keyup
*
* ... and the external listener is the parent node's
* 'plusMinus:recalculate', a custom event that we can
* monitor and handle.
*****/
domEl.on("click", ".minusBtn", function(){
valueEl.val(Number(valueEl.val() ) -1);
valueEl.trigger("change");
}).on("click", ".plusBtn", function(){
valueEl.val(Number(valueEl.val() ) + 1);
valueEl.trigger("change");
}).on("change keyup", ".quantity", function(){
domEl.parent().trigger("plusMinus:recalculate");
});
/*****
* the plusMinus:recalculate event is called on the DOMEl's parent
* node. This is the only el that should be aware of its child nodes,
* thus the only el that should have access to its descendant
* PlusMinusWidget nodes.
*****/
$(document).on("plusMinus:recalculate", domEl.parent(), function(){
resultEl.val(0);
$(".plusMinusWidget").each(function(){
resultEl.val(Number(resultEl.val()) + Number($(this).find(".quantity").val()) )
})
})
},
getHtml: function(){
return this.DOMEl;
}
})
/******************
* Everything above could be moved into
* a separate file, and saved as
* plusMinus.widget.js (for example).
* That piece can be hidden from the end
* user -- all they need to know is the
* code below: how to initialize the
* PlusMinusWidget object, and how to
* use its sole public function, getHtml.
*
******************/
// So here, we actually create an array of our PlusMinusWidget objects.
// As each is created, it's initialized and its DOM el is populated.
var plusMinusWidgets = [new PlusMinusWidget("firstQty"), new PlusMinusWidget("secondQty"), new PlusMinusWidget("thirdQty")];
// Create the reference to our results input and to the container itself.
var resultEl = $(".resultSet");
var plusMinusContainer = $(".container");
// iterate over the array we created just above, and for each member of the
// array, stick its DOM structure into the containing element. Note that this
// handles all the DOM, all the listeners, everything.
$.each(plusMinusWidgets, function(){
plusMinusContainer.append(this.getHtml());
})
fieldset {
border: 0;
}
.plusMinusThing {
display: block;
width: 206px;
padding: 0;
border: 1px solid #ccc;
}
.plusMinusThing input {
float: left;
margin: 0;
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="results">
<input type="text" class="resultSet" />
</fieldset>
<div class="container">
</div>
This was created with jQuery again, simply because it does simplify the creation of objects and listeners, but its not entirely necessary. Again, the beauty of this approach is that the DOM creation and event listener bits are completely hidden 'under the hood.' The end user really only needs to know how to initialize the PlusMinusWidget, and how to pop it into the DOM. Everything else happens seamlessly.
And again, this is just another approach. Not good, better or best, simply a thought experiment.
I tried to create an online calculation form using javascript, everything is ok except radio buttons.
Scenario:
x(select list) =
item1 - value="11.2"
item2 - value="7.6"
item3 - value="7"
y=(input number)
z=(input number)
coverkind=(radio button)
if 1 selected >> coverkind = z*800
if 2 selected >> coverkind = ((y/16)+1)*8*z
totalprice= (x*y*z)+(1000*z)+coverkind
my work till now:
<html>
<head>
<script type="text/javascript">
function getselectionPrice() {
var elt = document.getElementById("selectionone");
var selectionPrice = elt.options[elt.selectedIndex].value;
var y = document.getElementById("y").value;
var z = document.getElementById("z").value;
var ser = (selectionPrice * y * z);
var dz = z*1000;
var coverkind = document.getElementById("cover").value;
if (coverkind == 'soft') {
var SizePrice = (z * 800);
} else {
var SizePrice = ((y / 16) + 1) * 8 * z;
}
var finalPrice = ser + dz;
document.getElementById("totalPrice").value = finalPrice;
}
</script>
</head>
<body>
<div>
<form action="" id="calcform" onsubmit="return false;">
<div>
<div>
<fieldset>
<label>select</label>
<select id="selectionone" name='selectionone' onChange="getselectionPrice()">
<option value="11.2">1</option>
<option value="7.6">2</option>
<option value="7">3</option>
</select>
<br/>
<p>y
<input type="text" id="y" onchange="getselectionPrice()" />
</p>
<p>z
<input type="text" id="z" onchange="getselectionPrice()" />
</p>
<label>cover</label>
<input type="radio" name="cover" value="hard" />hard
<br />
<br>
<input type="radio" name="cover" value="soft" />soft
<br>
<br>
<br/>The new calculated price:
<INPUT type="text" id="totalPrice" Size=8>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="getselectionPrice()" />
</div>
</form>
</div>
</body>
</html>
If I remove the coverkind from js, the rest works fine. I googled about getting value from radio button and nothing found very relevant to this situation.
firebug error panel :
TypeError: document.getElementById(...) is null
var coverkind = document.getElementById("cover").value;
If you can use jQuery, you can get the value of the checked radio button in one line.
var Val = $("input[name=cover]:checked").val();
Here is the solution of your problem.
First give a same id to your radio buttons.
The checked property will tell you whether the element is selected:
<input type="radio" id="cover" name="cover" value="hard" checked="checked" />hard
<br />
<br>
<input type="radio" id="cover" name="cover" value="soft" />soft
and in JavaScript function, you can get it.
var coverkind = null;
if (document.getElementById('cover').checked)
{
coverkind = document.getElementById('cover').value;
}
if (coverkind == 'soft') {
var SizePrice = (z * 800);
} else {
var SizePrice = ((y / 16) + 1) * 8 * z;
}
You can use the output tag if you want or something else for your output. (a <p> element for example). Just make sure you give anything you want to access in your Javascipt an 'id' value.
You'll need to create a new file and call it something like 'script.js'. Google how to include this script in your html document.
Some of the things you'll need to use in your script:
document.getElementById(str) Returns an object representing an html
element with an id of 'str'
parseFloat(str) Takes a string 'str' and return the float value
.value This is a read/write property of an input text box object
that contains the text value
.checked ..and a property of an input radio button object.
When you hit a wall refer to the great google ;) Put all that together and you should be on the right track.
I am trying to create a page that lets the user enter three numbers, and have the max and min values printed below from the input. I've used both the Math.max/min functions and also tried an if statement but When I click submit nothing shows up. Some insight would be greatly appreciated, thanks!
function max() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var z = document.getElementById("num3").value;
var maximum = Math.max(parseInt(x), parseInt(y), parseInt(z));
document.getElementById("max").innerHTML= maximum;
}
function min() {
var x = parseInt(document.getElementById("num1").value);
var y = parseInt(document.getElementById("num2").value);
var z = parseInt(document.getElementById("num3").value);
document.getElementById("min").innerHTML = Math.min(x,y,z);
}
And here is my html
<p>Enter First Number:</p>
<input type="text" name = "number1" id="num1"><br>
<p>Enter Second Number</p>
<input type="text" name = "number2" id="num2"><br>
<p>Enter third number</p>
<input type="text" name = "number3" id="num3"><br>
<input type="submit" value="Submit" onclick="max(); min(); "><br />
<p>Max =</p><p id ="max"></p><br />
<p>Min =</p><p id ="min"></p><br />
replace <input type="submit"/> to <button type="submit" value="" onclick="minmax();">Submit</button>
and add JS function:
function minmax() {
min();
max();
}
Your problem seems related to how you are attaching your event.
It works OK when I use:
document.querySelector( '[type="submit"]' ).addEventListener( 'click', function() {
max();
min();
}, false );
http://jsfiddle.net/yemxrmqq/
You just need to change the tag related to the button, instead of:
<input type="submit" value="Submit" onclick="max(); min(); "><br />
just put:
<button type="submit" value="Submit" onclick="max(); min()">Click</button><br />
None of the answers here tell you why your code didn't work.
Identifiers in inline listeners are first resolved as properties of the element on which they are placed. Input elements have a default max attribute, so within an inline listener, the identifier max will reference the input's max property. Hence in any document:
<input onclick="console.log(max)">
shows '' (i.e. empty string).
So you can either change the names of the functions to something more meaningful, or change the context from which they are called so that the identifiers aren't resolved on the element, and the OP code works. e.g.
<input type="submit" value="Submit" onclick="callBoth()">
and
function callBoth() {
max();
min();
}
Incidentally, an input type submit outside a form is just a button, so you should use:
<input type="button" ...>