Что делают console.log и return для html? - PullRequest
Новая
       11

Что делают console.log и return для html?

0 голосов
/ 31 августа 2018

При использовании события onclick использование «return» и «console.log» в моем коде javascript ничего не делает, в то время как, например, использование document.write делает, так что я знаю, что это не код. Это может быть глупый вопрос, но почему это так? Когда я тренируюсь с Codecademy, они всегда используют console.log или return, и появляется ответ. 

myArray = [2000, 2200, 2300, 2400, 2600, 3000];
var rand = myArray[Math.floor(Math.random() * myArray.length)];

    function swimWorkout() {
        return rand;
    }
</head>
<body>
    <button onclick="swimWorkout();">Find the length </button>
</body>

Ответы [ 4 ]

0 голосов
/ 31 августа 2018

Это действительно возвращает значение, как указано в документации и, как и следовало ожидать: 

function swimWorkout() {
    return rand;
}

Однако, это не то, что вы ожидаете: 

<button onclick="swimWorkout();">Find the length </button>

Когда вы нажимаете эту кнопку, функция выполняется и возвращается значение. Но нет нигде инструкции относительно того, что делать с этим значением. Нет причин, по которым он будет отображаться где-либо, потому что нет кода для его отображения.

Вы нашли способ потенциально отобразить что-либо: 

document.write(rand);

Однако это может быть проблематичным подходом. document.write() не дает большого контроля над тем, где в документе вы хотите что-то написать. Если у вас есть некоторый встроенный JavaScript, выполняющийся при загрузке страницы, он должен выводить прямо там, где она есть. Но что-нибудь после этого факта, вероятно, не напишет, куда вы хотите.

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

myArray = [2000, 2200, 2300, 2400, 2600, 3000];
var rand = myArray[Math.floor(Math.random() * myArray.length)];

function swimWorkout() {
    document.getElementById('output').innerText = rand;
}
<button onclick="swimWorkout();">Find the value</button>
<p>The value is: <span id="output"></span></p>

Вы можете дополнительно отсоединить свой JavaScript от своего HTML (также рекомендуется), связавшись с событием click вместо записи встроенного вызова функции в HTML: 

myArray = [2000, 2200, 2300, 2400, 2600, 3000];
var rand = myArray[Math.floor(Math.random() * myArray.length)];

function swimWorkout() {
    document.getElementById('output').innerText = rand;
}

document.getElementById('find-value').addEventListener('click', swimWorkout);
<button id="find-value">Find the value</button>
<p>The value is: <span id="output"></span></p>

Быстрое разделение разметки и логики становится намного проще в целом.

0 голосов
/ 31 августа 2018

Оператор «return» фактически относится к возвращению значения, которое вы будете передавать из конечного процесса функции, а «console.log» будет записывать данные, которые вы задали в разделе консоли, в инструменте разработчика вашего браузера ( нажмите F12 в браузере и перейдите на вкладку консоли ), например 

function foo() {
   // do something
   return “ran foo function”;
}

console.log(foo());
0 голосов
/ 31 августа 2018

console.log () отправляет сообщения на консоль, а document.write () добавляет содержимое в HTML-документ. Я не использовал Codeacademy, но я предполагаю, что что-то «всплывает» в консоли (место, где идут операторы console.log). У каждого браузера есть консоль. Например, в Chrome перейдите к View -> Developer -> Javascript Console, чтобы увидеть выходные данные ваших операторов console.log ().

0 голосов
/ 31 августа 2018

console - это браузерное приложение в браузере, которое пишет только в инструменты разработчика браузера. То же самое относится и к console на этом веб-сайте. Он пишет только на веб-страницу этого сайта. Он не изменяет и не может изменить HTML-документ или DOM.

document.write - это JavaScript, работающий в самом браузере, который записывает в HTML-документ через DOM.

...