Quiero preguntar si hay un enfoque alternativo a esto. soy muy nuevo en javascript

Tengo 3 botones de radio que cambiarán el tamaño de fondo de un DIV. Me las arreglé para hacerlo posible usando ternario en el que cambia el tamaño de fondo si está marcado. DOM. Al parecer, la cubierta no funciona. Lo he probado varias veces, pero solo el auto y el contenedor funcionan cuando se verifica la radio. No hay un valor de tamaño de fondo predeterminado en el css. Parece que su valor predeterminado es automático, aunque Cubrir no funciona cuando está marcado mientras que Contener sí lo hace. Gracias :D Aquí están los códigos.

 <div class="radiobtn"> <input type="radio" id="bgCOVER" name="radiobtnnm" value="COVER" onclick="backgroundfunc()"> <label for="BGcover">Background Cover</label> <input type="radio" id="bgAUTO" name="radiobtnnm" value="AUTO" onclick="backgroundfunc()"> <label for="BGauto">Background Auto</label> <input type="radio" id="bgCONTAIN" name="radiobtnnm" value="CONTAIN" onclick="backgroundfunc()"> <label for="BGcontain">Background Contain</label> </div>

JAVASCRIPT:

 function backgroundfunc() { var coverval = document.getElementById("bgCOVER"); document.getElementById("outputjs").style.webkitBackgroundSize = coverval.checked ? "cover" : "none"; var autoval = document.getElementById("bgAUTO"); document.getElementById("outputjs").style.backgroundSize = autoval.checked ? "auto" : "auto"; var containval = document.getElementById("bgCONTAIN"); document.getElementById("outputjs").style.backgroundSize = containval.checked ? "contain" : "none";

}

Encontré una solución 🤦🏻‍♂️ Hice el tamaño de fondo como predeterminado. por lo que solo habrá 2 opciones ya que la cobertura no funciona. Si hay un mejor enfoque en este problema, por favor hágamelo saber. te lo agradeceré Me ayudará a adquirir conocimientos para futuros proyectos ¡Gracias! :D