Javascript Отримати елемент за ідентифікатором та встановити значення


79

У мене є функція javascript, якій я передаю параметр. Параметр представляє ідентифікатор елемента (прихованого поля) на моїй веб-сторінці. Я хочу змінити значення цього елемента.

function myFunc(variable){
  var s= document.getElementById(variable);
  s.value = 'New value'
}

Коли я це роблю, з’являється повідомлення про помилку, через яку неможливо встановити значення, оскільки об’єкт є нульовим. Але я знаю, що об’єкт не є нульовим, оскільки я бачу його в HTML-коді, сформованому браузером. У будь-якому випадку, я спробував такий код для налагодження

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'

Як я можу це виправити?

РЕДАГУВАТИ

Елемент, для якого я встановлюю значення, є прихованим полем, а ідентифікатор det динамічно під час завантаження сторінки. Я спробував додати це у функцію $ (document) .ready, але не працював


2
Давайте подивимося, куди ви викликаєте функцію (яка, судячи з коду, який ви надали, не має імені).
Anthony Grist

що є змінною? А як ви називаєте безіменну функцію?
mplungjan

Коли ви проводите діагностику alert()або console.log()у подібних випадках, вам завжди слід обертати значення деякими символами маркера, щоб ви могли визначити, чи є в рядках символи, що розбігаються. Отже:alert("[" + x + "], [" + y + "]");
Точковий

Будь ласка, покажіть приклад цього на jsfiddle.net - те, про що ви запитуєте, насправді не має сенсу.
Денніс

Відповіді:


73

Якщо myFunc (змінна) буде виконано до того, як textarea буде надано на сторінку, ви отримаєте нульову помилку виключення.

<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. Сподіваюся, це корисно.


Я створюю приховане поле, а потім створюю кнопку, яка виконує функцію, яка встановлює значення прихованого поля. Однак ідентифікатор встановлюється динамічно. Я спробував додати цю функцію до функції $ (document) .ready, але виникає та сама проблема.
jpo

@jpo Якщо ідентифікатор встановлюється динамічно, ви також повинні переконатися, що myFunc викликається після встановлення ідентифікатора. Ви можете спробувати зателефонувати myFunc у функції, яка встановлює ідентифікатор.
Сяодан Мао

Мій код виглядає так @ Html.HiddenFor (m => m.myfield, new {id = "myId"}) <input type = "button" onclick = "javascript: myFunc (myID)" value = "button" /> .
jpo

Функція викликається лише при натисканні кнопки, і це відбувається лише після завантаження сторінки. Як ще я можу переконатися, що все відбувається до натискання кнопки?
jpo

@jpo У onclick = "javascript: myFunc (myID)", myID слід обертати одинарними лапками.
Сяодан Мао

23

Дано

<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");
}

буде робити те, що ти хочеш


Саме те, що я думав. Але мій ідентифікатор встановлений динамічно. Але я використав ту саму ідею. Але коли викликається функція I, документ не може знайти елемент із зазначеним ідентифікатором
jpo

Нам потрібно побачити html і обробник подій (onclick або що завгодно)
mplungjan

4
<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>

2

Для кожного типу елемента ви можете використовувати певний атрибут для встановлення значення. Наприклад:

<div id="theValue1"></div>
window.document.getElementById("theValue1").innerText = "value div";

<input id="theValue2"></input>
window.document.getElementById("theValue2").value = "value input";

Ви можете спробувати приклад тут!


1

спробуйте, як нижче, це буде працювати ...

<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>

1
Вбудовані обробники подій - погана практика.
jbabey

0

Я думаю, що проблема полягає в тому, як ви викликаєте свою функцію javascript. Ваш код такий:

<input type="button" onclick="javascript: myFunc(myID)" value="button"/>

myID слід обернути в лапки.


2
javascript:Мітка абсолютно НЕ потрібна
mplungjan

0

Потрапляючи на це запитання, жодна відповідь не викликала можливості використовувати .setAttribute()крім.value()

document.getElementById('some-input').value="1337";
document.getElementById('some-input').setAttribute("value", "1337");

Хоча це малоймовірно корисно для оригінального запитувача, цей додаток насправді змінює зміст значення у джерелі сторінок, що, в свою чергу, робить значення оновленим form.reset() надійним для .

Сподіваюсь, це може допомогти іншим.

(Або я через півроку, коли я забув про js примхи ...)

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.