JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="rect-x" name="rect-x" placeholder="Enter value for X:" />
<br/>
<input type="number" id="rect-y" name="rect-y" placeholder="Enter value for Y:" />
<br/>
<input type="number" id="rect-z" name="rect-z" placeholder="Enter value for Y:" />
<br/>
<br/>
<br/>
<p>Please see to the right for the converted values :)</p>
<input type="submit" value="CONVERT" onClick="calculate()" />
<div>
    <p>Cylindrical Coordinate System:</p>
    <div id="cylindrical">
        <!-- result comes here through the script -->
    </div>
</div>
<br/>
<div>
    <p>Spherical Coordinate System:</p>
    <div id="spherical">
        <!-- result comes here through the script -->
    </div>
</div>

JavaScript

function calculate() {

    var userx = document.getElementById('rect-x').value;
    var usery = document.getElementById('rect-y').value;
    var userz = document.getElementById('rect-z').value;

    var divobj1 = document.getElementById('cylindrical');
    divobj1.style.display = 'block';
    divobj1.style.color = 'rgb(0,136,180)';
    divobj1.style.fontSize = "xx-large";
    divobj1.innerHTML = userx;

    var divobj2 = document.getElementById('spherical');
    divobj2.style.display = 'block';
    divobj2.style.color = 'rgb(0,136,180)';
    divobj2.style.fontSize = "xx-large";
    divobj2.innerHTML = usery;
}