Javascript ID로 요소 가져 오기 및 값 설정
매개 변수를 전달하는 자바 스크립트 함수가 있습니다. 매개 변수는 내 웹 페이지에있는 요소 (숨겨진 필드)의 ID를 나타냅니다. 이 요소의 값을 변경하고 싶습니다.
function myFunc(variable){
var s= document.getElementById(variable);
s.value = 'New value'
}
이렇게하면 개체가 null이기 때문에 값을 설정할 수 없다는 오류가 발생합니다. 하지만 브라우저에서 생성 한 html 코드에서 개체를 볼 수 있기 때문에 개체가 null이 아니라는 것을 알고 있습니다. 어쨌든 다음 코드를 디버깅하여 시도했습니다.
function myFunc(variable){
var x = variable;
var y = 'This-is-the-real-id'
alert(x + ', ' + y)
var s= document.getElementById(x);
s.value = 'New value'
}
경고 메시지가 표시되면 두 매개 변수가 동일하지만 여전히 오류가 발생합니다. 하지만 내가 할 때 모든 것이 잘 작동합니다.
var s= document.getElementById('This-is-the-real-id');
s.value = 'New value'
이 문제를 어떻게 해결할 수 있습니까?
편집하다
값을 설정하는 요소는 숨겨진 필드이고 ID는 페이지가로드 될 때 동적으로 det입니다. $ (document) .ready 함수에 이것을 추가하려고 시도했지만 작동하지 않았습니다.
textarea가 페이지에 렌더링되기 전에 myFunc (variable)이 실행되면 null 예외 오류가 발생합니다.
<html>
<head>
<title>index</title>
<script type="text/javascript">
function myFunc(variable){
var s = document.getElementById(variable);
s.value = "new value";
}
myFunc("id1");
</script>
</head>
<body>
<textarea id="id1"></textarea>
</body>
</html>
//Error message: Cannot set property 'value' of null
따라서 텍스트 영역이 페이지에 있는지 확인한 다음 myFunc를 호출하면 window.onload 또는 $ (document) .ready 함수를 사용할 수 있습니다. 도움이 되었기를 바랍니다.
주어진
<div id="This-is-the-real-id"></div>
그때
function setText(id,newvalue) {
var s= document.getElementById(id);
s.innerHTML = newvalue;
}
window.onload=function() { // or window.addEventListener("load",function() {
setText("This-is-the-real-id","Hello there");
}
당신이 원하는 것을 할 것입니다
주어진
<input id="This-is-the-real-id" type="text" value="">
그때
function setValue(id,newvalue) {
var s= document.getElementById(id);
s.value = newvalue;
}
window.onload=function() {
setValue("This-is-the-real-id","Hello there");
}
당신이 원하는 것을 할 것입니다
function setContent(id, newvalue) {
var s = document.getElementById(id);
if (s.tagName.toUpperCase()==="INPUT") s.value = newvalue;
else s.innerHTML = newvalue;
}
window.addEventListener("load", function() {
setContent("This-is-the-real-id-div", "Hello there");
setContent("This-is-the-real-id-input", "Hello there");
})<div id="This-is-the-real-id-div"></div>
<input id="This-is-the-real-id-input" type="text" value=""><html>
<head>
<script>
function updateTextarea(element)
{
document.getElementById(element).innerText = document.getElementById("ment").value;
}
</script>
</head>
<body>
<input type="text" value="Enter your text here." id = "ment" style = " border: 1px solid grey; margin-bottom: 4px;"
onKeyUp="updateTextarea('myDiv')" />
<br>
<textarea id="myDiv" ></textarea>
</body>
</html>
아래처럼 시도해보십시오.
<html>
<head>
<script>
function displayResult(element)
{
document.getElementById(element).value = 'hi';
}
</script>
</head>
<body>
<textarea id="myTextarea" cols="20">
BYE
</textarea>
<br>
<button type="button" onclick="displayResult('myTextarea')">Change</button>
</body>
</html>
각 요소 유형에 대해 특정 속성을 사용하여 값을 설정할 수 있습니다. 예 :
<div id="theValue1"></div>
window.document.getElementById("theValue1").innerText = "value div";
<input id="theValue2"></input>
window.document.getElementById("theValue2").value = "value input";
문제는 자바 스크립트 함수를 호출하는 방식이라고 생각합니다. 귀하의 코드는 다음과 같습니다.
<input type="button" onclick="javascript: myFunc(myID)" value="button"/>
myID는 따옴표로 묶어야합니다.
참고 URL : https://stackoverflow.com/questions/14649173/javascript-get-element-by-id-and-set-the-value
'development' 카테고리의 다른 글
| 웹 소켓은 p2p (브라우저 대 브라우저) 통신을 허용합니까? (0) | 2020.11.15 |
|---|---|
| 다중 할당 의미 (0) | 2020.11.15 |
| 기본 스택 크기는 무엇이며 확장 할 수 있으며 가비지 수집과 어떻게 작동합니까? (0) | 2020.11.15 |
| Doxygen 대 Javadoc (0) | 2020.11.15 |
| .exp의 용도는 무엇이며 .lib와 .dll의 차이점은 무엇입니까? (0) | 2020.11.15 |