You have several problems, but the biggest was that you were attempting to set your output elements themselves to the answers to your math problems instead of setting the .textContent of your elements to the answers to your math.
Now, since you are just learning all of this, let's break some bad habits before they become set in stone. No doubt you've copied much of your code from what you've seen others use and, unfortunately, most of the code on the web gets created this way and not by people who really understand what they are writing.
With this in mind...
Do not set up event handlers via HTML event attributes (i.e. onclick, onmouseover, etc.). This is a 25+ year old technique that we used before we had modern standards and best practices and because it's easy to use, people keep using it. But there are a variety of reasons why you should not use this technique and instead separate your JavaScript from your HTML. Instead, keep your JavaScript separate and use .addEventListener() to hook up your elements to their respective callback functions.
Just get your element references once, not every time you run your functions because scanning the document for an element takes time and resources. There's no reason to keep scanning for the same element over and over.
Related to that. Be careful with .getElementsByTagName() as it returns a "live node list", which means that it has to re-scan the document to ensure that it keeps its list up to date. This can be extremely wasteful in terms of performance. Instead, .getElementById(), .querySelector() and .querySelectorAll() should probably be the most common ways to scan for individual elements or groups of elements.
The output element doesn't have an HTML type attribute. input and button elements allow for setting the type. output is purely a semantic element, and for all intents and purposes, not that much functionally different from a span element. It's just a way for the browser to know that it will contain something that the page designer deems as some kind of output, from anywhere. It's also not supported in any desktop version of IE (if that matters to you). It's fine that you are using it, but I think you misunderstand what it's for an how it's used.
You really don't need any if/then code in your solution because JavaScript has a built-in Math object, which has .max and .min methods that do exactly what you are attempting.
Remember that the "T" in HTML stands for "Text". No matter what you think you are entering into a form field, it is processed as text and when JavaScript obtains that value, it processes it as text as well. And, in JavaScript the + operator can mean string concatenation or it can mean mathematical addition. Which one it does depends on what the operands are. If one of the operands is a string then string concatenation is done. So, you need to convert the data in your input elements to numbers before you do any math on them. This can be done in a variety of ways (implicit and explicit), but one simple way is to prepend a + operator in front of a string that is convertible to a number and you'll see that in my average code below.
Lastly (and this wasn't causing your code to not work, but you should know), every HTML document must have a <head> section just prior to the <body> and the <head> section must have a non-empty <title> element within it for the document to be considered valid. Browsers don't validate HTML, they simply skip HTML that they don't understand. This means that you could very well have a web page that "works" for you in your browser, but is technically incorrect. Always validate your HTML at http://validator.w3.org to ensure it's correct.
<!doctype html>
<html>
<head>
<title>Basic JavaScript 101</title>
</head>
<body>
<form>
Number 1: <input type="text" name="num1"> <br>
Number 2: <input type="text" name="num2"> <br>
Number 3: <input type="text" name="num3"> <br>
Maximum: <output id="max"></output> <br> <!-- output should not be in input type elements -->
Average: <output id="avg"></output> <br> <!-- output should not be in input type elements -->
Minimum: <output id="min"></output> <br> <!-- output should not be in input type elements -->
<br><br>
</form>
<button type="button" id="calc">Calculate</button>
<script>
// Get references to the elements just once
var num1 = document.querySelector("[name='num1']");
var num2 = document.querySelector("[name='num2']");
var num3 = document.querySelector("[name='num3']");
var max = document.getElementById("max");
var avg = document.getElementById("avg");
var min = document.getElementById("min");
var btn = document.getElementById("calc");
// Set up your event handler(s) in JavaScript, not with HTML attributes
btn.addEventListener("click", function(){
maximum();
average();
minimum();
});
function maximum() {
// You can't just set an element to a value. You have to set the content of the
// element to a value. Also, JavaScript provides a built-in Math object that
// can get you the maximum number from a set of numbers. No if/then needed.
max.textContent = Math.max(num1.value, num2.value, num3.value);
}
function average() {
// Convert values to numbers and do math
avg.textContent = (+num1.value + +num1.value + +num3.value) / 3
}
function minimum() {
// You can't just set an element to a value. You have to set the content of the
// element to a value. Math can also get you the minimum number in a set:
min.textContent = Math.min(num1.value, num2.value, num3.value);
}
</script>
</body>
</html>
