<main>
	<div id="results">
		No results
	</div>
</main>
main {
	margin: 2em;
}

#results {
	font-weight: bold;
}

#results.happy {
	color: green;
}

#results.error {
	color: red;
}
View Compiled
function setResult( txt, cls ) {
	const r = document.getElementById( 'results' );
	r.innerText = txt;
	r.className = cls || '';
}

function showError( e ) {
	setResult( `error: ${ e }`, 'error' );
}

function showHappy( txt ) {
	setResult( `happy: ${ txt }`, 'happy' );
}

Promise.resolve( 'hi' ).then( showHappy ).catch( showError );
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.