HTML onclick не запускает мою функцию, просто ничего не происходит - PullRequest
Новая
       0

HTML onclick не запускает мою функцию, просто ничего не происходит

0 голосов
/ 01 июня 2018

поэтому я не могу найти ответ, почему это не работает.Кажется, все должно работать, но когда я нажимаю на кнопку, ничего не происходит.Пожалуйста, помогите мне решить эту проблему. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Next Article</title>
    <style>div{width:600px; text-align: center; font-size: 1.5em} article{border: 2px solid blue; padding: 2em; margin: 1em}</style>
    <script src="jquery-3.3.1.js"></script>
    <script src="next-article.js"></script>
</head>
<body>
<div id="content"></div>
<div><button onclick="showNext()">Show Next Article</button></div>
</body>
</html>

Вот файл javascript: 

/* eslint-env jquery */
/* eslint-disable no-unused-vars */
function getArticleGenerator (articles) {
  let contentHolder = $('#content')

  return function () {
    if (articles.length > 0) {
      let article = $('<article>')
      article.append($(`<p>${articles.shift()}</p>`))
      contentHolder.append(article)
    }
  }
}

let articles = [
  'a',
  'b',
  'c',
  'd',
  'e'
]
let showNext = getArticleGenerator(articles)

Ответы [ 3 ]

0 голосов
/ 01 июня 2018

Проверьте решение: D 

function getArticleGenerator (articles) {
  let contentHolder = $('#content')

  return function () {
    if (articles.length > 0) {
      let article = $('<article>')
      article.append($(`<p>${articles.shift()}</p>`))
      contentHolder.append(article)
    }
  }
}

let articles = [
  'a',
  'b',
  'c',
  'd',
  'e'
]
showNext = getArticleGenerator(articles)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="content"></div>
<div><button type="button" onclick="showNext()">Show Next Article</button></div>
0 голосов
/ 02 июня 2018

Я решил проблему.Однако я не понимаю, почему это работает так.Сначала я заметил, что при внутреннем использовании в html моя функция работает, поэтому я попытался с помощью сценария переместиться вниз в теле и вуаля, он работает.Однако мне бы очень хотелось понять, почему это так.Особенно кажется, что на некоторых других компьютерах парней мой исходный код работает.и так, что здесь происходит?Заранее спасибо тому, кто объяснит мне эту тайну.Вот как я изменил свой HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Next Article</title>
    <style>div{width:600px; text-align: center; font-size: 1.5em} article{border: 2px solid blue; padding: 2em; margin: 1em}</style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>
<body>
<div id="content"></div>
<script src="next-article.js"></script>
<div><button onclick="showNext()">Show Next Article</button></div>
</body>
</html>
0 голосов
/ 01 июня 2018

следующий рабочий скрипт.Поскольку let устанавливает область видимости переменного блока, он не был доступен. 

function getArticleGenerator (articles) {
  let contentHolder = $('#content')

  return function () {
    if (articles.length > 0) {
      let article = $('<article>')
      article.append($(`<p>${articles.shift()}</p>`))
      contentHolder.append(article)
    }
  }
}

let articles = [
  'a',
  'b',
  'c',
  'd',
  'e'
]
var showNext = getArticleGenerator(articles)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<div><button onclick="showNext()">Show Next Article</button></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...