Заменить текст на при загрузке страницы

#javascript

Вопрос:

Я знаю, как заменить текст на getElementById() функцию в такой ситуации:

 <script type="text/javascript">
    function go(){
        var p = document.getElementById('ccc');
        p.firstChild.nodeValue = 'AAA';
    }
</script>

<div id='ccc'>o</div>

<a href="javascript:go()">go</a>

Когда я нажимаю на ссылку перехода, ‘o’ заменяет на ‘AAA’.

Но я хочу заменить текст при загрузке страницы в браузер без какого-либо нажатия. Таким образом, пользователю не обязательно знать, что в div ‘ccc’ был какой-то текст ‘o’. Он должен видеть только ‘AAA’ с самого начала.

Как это сделать?

Ответ №1:

Вы можете использовать onload событие:

 window.onload = go;

// or better
window.addEventListener("load", go);

Вы также можете использовать анонимную функцию:

 window.onload = function()
{
  // ...
}
window.addEventListener("load", function()
{
  // ...
});

Ответ №2:

используйте атрибут onload следующим образом: <body onload="go()">

1. Но если будет более одной функции замены, как вызвать все эти функции в теге body?

2. onload="go(); go2(); go3()" , но я не рекомендую это. Всегда удобнее отделять HTML от JavaScript!

3. Вы можете обернуть вызовы для них всех в одну функцию или использовать решение, предложенное ComFreak

Ответ №3:

обработайте событие window.onload, оно запускается при загрузке страницы.

 <script type="text/javascript">
function doLoad() {
   go1();
   go2();
   // ...
}

if ( window.addEventListener ) { 
   window.addEventListener( "load", doLoad, false );
}
else 
   if ( window.attachEvent ) { 
      window.attachEvent( "onload", doLoad );
} else 
       if ( window.onLoad ) {
         window.onload = doLoad;
}
</script>

1. Вам даже не нужно переносить go() в другую функцию!

2. это просто для удобства =)

3. Хммм, да, если вам когда-нибудь понадобится добавить функцию

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

Ответ №4:

В качестве альтернативы вы можете просто поместить свой скрипт внизу страницы, тогда все элементы будут загружены.

 <div id='ccc'>o</div>

<script type="text/javascript">
    var p = document.getElementById('ccc');
    p.firstChild.nodeValue = 'AAA';
</script>