Не работает скрипт смены стиля у элемента

Модератор объединил мой предыдущий вопрос с другим, якобы похожим, намекнув на то что классам нельзя менять стиль и т.д.

Я переделал скрипт, менял class на id и делал еще кучу вариаций, включая "name", используя кавычки ' и " нечего не работает, стили так и не меняются

function l_image2 (a) {

var vall = document.getElementById("display_avatar").value;
 if (document.getElementById('radio-1').checked) { 
 if (document.getElementById('radio-3').checked) {
       document.example_img2.src = a + vall + '.png';
       document.getElementById('ramka2').style.display = 'none';
       document.getElementById('ramka3').style.display = 'none';
       document.getElementById('ramka4').style.display = 'none';
       document.getElementById('ramka5').style.display = 'none';
       document.getElementById('ramka1').style.display = 'block';

    }
    if (document.getElementById('radio-4').checked) {
       document.example_img2.src = a + vall + 'post2' +'.png';
       document.getElementsByClassName('ramka2img')[0].style.display = '-webkit-inline-box';
       document.getElementsByClassName('ramka2img')[0].style.marginLeft = '0%';
       document.getElementById('ramka3').style.display = 'none';
       document.getElementById('ramka2').style.display = 'block';
       document.getElementById('ramka4').style.display = 'none';
       document.getElementById('ramka5').style.display = 'none';
       document.getElementById('ramka1').style.display = 'none';

    }
    if (document.getElementById('radio-5').checked) {
       document.example_img2.src = a + vall + 'post3' +'.png';
       document.getElementsByClassName('ramka3img')[0].style.display = '-webkit-inline-box';
       document.getElementsByClassName('ramka3img')[0].style.marginLeft = '0%';
       document.getElementById('ramka2').style.display = 'none';
       document.getElementById('ramka4').style.display = 'none';
       document.getElementById('ramka5').style.display = 'none';
       document.getElementById('ramka1').style.display = 'none';
        document.getElementById('ramka3').style.display = 'block';

    }
    if (document.getElementById('radio-6').checked) {
       document.example_img2.src = a + vall + 'post4' +'.png';
       document.getElementsByClassName('ramka4img')[0].style.display = '-webkit-inline-box';
       document.getElementsByClassName('ramka4img')[0].style.marginLeft = '0%';
       document.getElementById('ramka2').style.display = 'none';
       document.getElementById('ramka3').style.display = 'none';
       document.getElementById('ramka5').style.display = 'none';
       document.getElementById('ramka1').style.display = 'none';
        document.getElementById('ramka4').style.display = 'block';

    }
    if (document.getElementById('radio-7').checked) {
       document.example_img2.src = a + vall + 'post5' +'.png';
       document.getElementsByClassName('ramka5img')[0].style.display = '-webkit-inline-box';
       document.getElementsByClassName('ramka5img')[0].style.marginLeft = '0%';
       document.getElementById('ramka2').style.display = 'none';
       document.getElementById('ramka3').style.display = 'none';
       document.getElementById('ramka4').style.display = 'none';
       document.getElementById('ramka1').style.display = 'none';
        document.getElementById('ramka5').style.display = 'block';

    }
    } 
    
 else if (document.getElementById('radio-2').checked) {
    
if (document.getElementById('radio-3').checked) {
        
       document.example_img2.src = a + vall +'.png';
 document.getElementsByClassName('ramka2').style.display = 'none';
       document.getElementById('ramka3').style.display = 'none';
       document.getElementById('ramka4').style.display = 'none';
       document.getElementById('ramka5').style.display = 'none';
       document.getElementById('ramka1').style.display = 'block';
    }   
    if (document.getElementById('radio-4').checked) {
        
       document.example_img2.src = a + vall + 'post22' +'.png';
       document.getElementsByClassName('ramka2img')[0].style.display = '-webkit-box';
       document.getElementsByClassName('ramka2img')[0].style.marginLeft = '34%';
       document.getElementById('ramka3').style.display = 'none';
       document.getElementById('ramka4').style.display = 'none';
       document.getElementById('ramka5').style.display = 'none';
       document.getElementById('ramka1').style.display = 'none';
        document.getElementById('ramka2').style.display = 'block';

    }
    if (document.getElementById('radio-5').checked) {
       
       document.example_img2.src = a + vall + 'post33' +'.png';
       document.getElementsByClassName('ramka3img')[0].style.display = '-webkit-box';
       document.getElementsByClassName('ramka3img')[0].style.marginLeft = '39%';
       document.getElementById('ramka2').style.display = 'none';
       document.getElementById('ramka4').style.display = 'none';
       document.getElementById('ramka5').style.display = 'none';
       document.getElementById('ramka1').style.display = 'none';
       document.getElementById('ramka3').style.display = 'block';

    }
    if (document.getElementById('radio-6').checked) {
       
       document.example_img2.src = a + vall + 'post44' +'.png';
document.getElementsByClassName('ramka4img')[0].style.display = '-webkit-box';
       document.getElementsByClassName('ramka4img')[0].style.marginLeft = '43%';
       document.getElementById('ramka2').style.display = 'none';
       document.getElementById('ramka3').style.display = 'none';
       document.getElementById('ramka5').style.display = 'none';
       document.getElementById('ramka1').style.display = 'none';
       document.getElementById('ramka4').style.display = 'block';
    }
    if (document.getElementById('radio-7').checked) {
    
       document.example_img2.src = a + vall + 'post55' +'.png';
       document.getElementsByClassName('ramka5img')[0].style.display = '-webkit-box';
       document.getElementsByClassName('ramka5img')[0].style.marginLeft = '45%';
       document.getElementById('ramka2').style.display = 'none';
       document.getElementById('ramka3').style.display = 'none';
       document.getElementById('ramka4').style.display = 'none';
       document.getElementById('ramka1').style.display = 'none';
       document.getElementById('ramka5').style.display = 'block';

    }

    }   
}
function l_image (a) {
    document.example_img.src = a + '.png';
    
    
}