Das Output-Element

by Jens Grochtdreis

HTML

<div>
            <input id="a" type="number"> + <input id="b" type="number">
            <input type="button" value="="
                onclick="document.getElementById('ergebnis').value =
                        parseInt(document.getElementById('a').value) +
                        parseInt(document.getElementById('b').value)">
        </div>
        <div>
            <label for="ergebnis">Ergebnis:</label>
            <output for="a b" id="ergebnis"></output>
        </div>

CSS

div {
    font-family: Verdana, sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
}

input[type=number]{
    height: 20px;
    border: 1px solid #a20000;
}

input[type=button] {
    background: #fd8700;
    color: #000;
    font-weight: bold;
    padding: 2px 10px;
    font-size: 16px;
    border: none;
}
/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}