여러 필드의 입력 데이터를 JS 변수에 저장 한 다음 텍스트에 붙여 넣어야합니다. 어떤 이유로 작동하지 않는 것 같은 내 코드가 있습니다.
다음은 입력 필드입니다.
<ul id="listings">
<li><input type="text" id="adjectives1" value="Adjective"></li>
<li><input type="text" id="adjectives2" value="Adjective"></li>
<li><input type="text" id="adjectives3" value="Adjective"></li>
</ul>
다음은 그 텍스트입니다.
<div id="textualdiv"> As the <span id="adjective1">fatal</span> mating dance of a pair of black holes with a total mass of more than a billion suns. Mostly in the form of <span id="adjective2">violent</span> in space-time known as <span id="adjective3">gravitational</span> waves.</div>
</div>
다음은 JS 스크립트입니다.
<script>
var adjective1 = document.getElementById("adjectives1").value;
var adjective2 = document.getElementById("adjectives2").value;
var adjective3 = document.getElementById("adjectives3").value;
</script>
<script>
document.getElementById('adjective1').innerHTML = adjective1;
document.getElementById('adjective2').innerHTML = adjective2;
document.getElementById('adjective3').innerHTML = adjective3;
</script>
입력 필드에 이미있는 텍스트의 기본 "형용사"값만 붙여 넣습니다. 그러나 다른 것을 입력하면 텍스트가 변경되지 않고 형용사 단어가 계속 표시됩니다.
입력 값이 변경되면 대상 요소 콘텐츠를 업데이트하는 변경 이벤트 처리기를 사용해야합니다.
function update(el){
var value = el.value;
document.getElementById(el.id.replace('adjectives', 'adjective')).innerHTML = value;
}<ul id="listings">
<li><input type="text" id="adjectives1" value="Adjective" onchange="update(this)"></li>
<li><input type="text" id="adjectives2" value="Adjective" onchange="update(this)"></li>
<li><input type="text" id="adjectives3" value="Adjective" onchange="update(this)"></li>
</ul>
<div id="textualdiv"> As the <span id="adjective1">fatal</span> mating dance of a pair of black holes with a total mass of more than a billion suns. Mostly in the form of <span id="adjective2">violent</span> <span id="noun3">ripples</span> in space-time known as <span id="adjective3">gravitational</span> waves.</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다