JavaScript calculator with two inputs and four operations
To get the ball rolling, a few things that come to mind:
JavaScript
Storing DOM-elements
In getInputs and showOuput you use document.getElementById to get the same DOM elements over and over again. You can simply store or &quot;cache&quot; them in variable an re-use them anytime you want:
var inputX = document.getElementById('x'),
    inputY = document.getElementById('y'),
    output = document.getElementById('output');

showOutput which seems to have an unused value in its signature, would now look like:
var showOutput = function(value) {
    output.innerHTML = value;
}

Filter input
getInputs already uses parseInt to filter the user's input. This will still result in NaN for all inputs that can't be parsed to integer, like &quot;hey&quot;.
You should test for this scenario and give the user a hint that something failed:
var operation = function(operationName) {
    var x = getInputs(inputX),
        y = getInputs(inputY);

    if (isNaN(x) || isNaN(y)) {
        // show an error message or give the inputs a red border etc.
        return;
    }

    // […]
};

By the way, your calculator doesn't make it clear, that it can only process integer values, which might lead to confusing results with inputs like this:

1.5 + 2.5 = 3

Improve the UX and leave the visitor a note.
manuplateAs
I think you meant to call the function manipulate. But why don't you simply call it calculate?
You can also use a switch-statement and shorter variable names to increase readability:
var calculate = function(operation, x, y) {
    switch(operation) {
        case 'add': return x + y;
        case 'sub': return x - y;
        case 'mul': return x * y;
        case 'div': return x / y;
    };
}

Again your calculator doesn't handle edge cases. For example it will show Infinity for division by 0 or NaN if numbers get to big.
You could test the result for NaN or Infinity and show a proper message to the user:
var result = calculate('div', x, y);

if (!isFinite(result)) {
    // show an error message
    return;
}


HTML
&lt;head&gt;
Event though it's a very simply example, add these two things in your header:
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Simple Calculator&lt;/title&gt;

It makes sure that:

The correct character set is chosen.
The user can find the tab with the calculator more easily.

Form
You're using form elements that are not descendants of a form element, nor do you link them to a form using the form-attribute. That is invalid HTML. Simply wrap everything into a form:
&lt;form&gt;
    &lt;input type=&quot;number&quot; id=&quot;x&quot;&gt;
    &lt;input type=&quot;number&quot; id=&quot;y&quot;&gt;
&lt;/form&gt;

A button is by default a submit button. You can change this by setting the type-attribute:
&lt;button type=&quot;button&quot; onclick=&quot;operation('add')&quot;&gt;Add&lt;/button&gt;

To further improve UX create labels to couple your text with a corresponding input. This also makes sure, that the input is focused as soon as a user clicks the label's text:
&lt;label&gt;
    First number
    &lt;input type=&quot;number&quot; id=&quot;x&quot;&gt;
&lt;/label&gt;

Or alternatively:
&lt;label for=&quot;x&quot;&gt;First number&lt;/label&gt;
&lt;input type=&quot;number&quot; id=&quot;x&quot;&gt;


Personally I wouldn't use a h1-element to output the result. Maybe a disabled input field works here, too.