부분적으로 유효한 HTML 코드가 있습니다. 라디오 버튼 선택에 따라 일부 텍스트 입력을 표시하려고 합니다. 저에게 작동하는 방식은 라디오 버튼을 누르면 다른 옵션이 숨겨지지만 화면이 처음 로드되면 3가지 옵션이 모두 표시된다는 것입니다. 클릭 시 함수가 호출되고 첫 번째 라디오 버튼의 선택된 옵션이 클릭을 구성하지 않기 때문이라고 가정합니다. 내가 만든 첫 번째 요청에만 표시되는 onload 이벤트 리스너를 만들어 보았지만 작동하지 않았습니다. 이게 내 코드야

<% layout('layouts/boilerplate') %>
    <h1>New Part</h1>
    <form action="/parts" method="POST" novalidate class="validated-form">
        <div>
            <label class="form-label" for="partnum">Part Number</label>
            <input  class="form-control" type="text" name="part[partnum]"  id="partnum" required>
        </div>
        <div>
            <label class="form-label" for="description">Part  Description</label>
            <input class="form-control" type="text" name="part[description]"   id="description" required>
        </div>
        <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="btn-check" name="part[type]" id="btnradio1" value="Purchased" autocomplete="off"  onclick="show1()" checked >
            <label class="btn btn-outline-primary" for="btnradio1">Purchased</label>
          
            <input type="radio" class="btn-check" name="part[type]" id="btnradio2" value="Assembly" autocomplete="off" onclick="show2()">
            <label class="btn btn-outline-primary" for="btnradio2">Assembly</label>
          
            <input type="radio" class="btn-check" name="part[type]" id="btnradio3" value="Machined" autocomplete="off" onclick="show3()">
            <label class="btn btn-outline-primary" for="btnradio3">Machined</label>
          </div>
          <div>
            <h1 id="test1">Test 1</h1> 
          </div>
          <div>
            <h1 id="test2" >Test 2</h1>
          </div>
          <div id="machined">
            <h1 id="test3" >Test 3</h1>
            <div>
                <label class="form-label" for="material">Material</label>
                <input  class="form-control" type="text" name="part[material]"  id="material" required>
            </div>
          </div>
          <div><button>Add  Part</button></div>    
    </form>
    <a href="/parts">Back to your Parts</a>

    <script>  
function show1(){
  document.getElementById('test1').style.display ='block';
  document.getElementById('test2').style.display ='none';
  document.getElementById('machined').style.display ='none';
}
function show2(){
  document.getElementById('test1').style.display ='none';
  document.getElementById('test2').style.display ='block';
  document.getElementById('machined').style.display ='none';
}
function show3(){
  document.getElementById('test1').style.display ='none';
  document.getElementById('test2').style.display ='none';
  document.getElementById('machined').style.display ='block';
}
  
    </script>