Как я могу реализовать функцию JavaScript в моем HTML с помощью кнопки? - PullRequest
Новая
       8

Как я могу реализовать функцию JavaScript в моем HTML с помощью кнопки?

0 голосов
/ 21 мая 2018

У меня есть функция, которую я хочу отображать в абзаце ниже одним нажатием кнопки.Я искал, как это сделать, и натолкнулся на то, чтобы текст был реализован в W3Schools с помощью «document.getElementById (). InnerHTML = ...». Я попытался переделать разные версии кода ниже.чтобы заставить его показать вызываемую функцию, однако я не могу понять это.Код прекрасно работает в консоли и с Alerts, так что определенно, когда я пытаюсь поместить его в HTML, я сталкиваюсь с проблемами.Также есть ли способ сделать это без использования J-Query или других внешних источников?те, где единственные ответы в прошлый раз, когда я сталкивался с этой проблемой в другом проекте.) Я также использую JSfiddle, поэтому JavaScript автоматически включается без ссылки на него в HTML.

HTML 

<html>

    <head> </head>

    <body>
        <button onclick='document.getElementById("p1").innerHTML = WOGen()'>Display</button>
        <p id='p1'></p>
    </body>

</html>

JavaScript 

function upperB() {
    var upperWO = [
        'pullups',
        'dips',
        'plank',
        'incline pushups',
        'decline pushups',
        'pull downs'
    ];
    return 'today is Upper Body: ' + upperWO;
}

function Legs() {
    var legWO = [
        'regular squats',
        'split squats',
        'lunges',
        'calf raises',
        'glut bridges'
    ];
    return 'today is Leg Day: ' + legWO;
}

function Abs() {
    var absWO = [
        'crunches',
        'long arm crunches',
        'scissors',
        'leg ups',
        'crunch kicks',
        'flutter kicks',
        'plank',
        'hollow holds',
        'star plank',
        'sitting punches',
        'plank rolls'
    ];
    return 'today is Ab Day: ' + absWO;
}

function Calisthenics() {
    var calith = [
        'bag work',
        'pushups',
        'crunches',
        'squats'
    ];
    return 'Today is calisthenics Day: ' + calith;
}

function WOGen() {
    var NDay = new Date();
    var Day = NDay.getDay();

    if (Day === 0) {
        return '73k and Swim Laps';
    }
    if (Day === 1) {
        return upperB();
    }
    if (Day === 2) {
        return Legs();
    }
    if (Day === 3) {
        return Abs();
    }
    if (Day === 4) {
        return Calisthenics();
    }
    if (Day === 5) {
        return '73k and Swim Laps';
    }
    if (Day === 6) {
        return '73k and Swim Laps';
    }
}

Я ищу, чтобы вставить функцию WOGen () в абзац.Я уже пробовал несколько разных способов и не могу его получить.

1 Ответ

0 голосов
/ 21 мая 2018

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

С вашим кодом, непосредственно запускаемым в JSFiddle ( см. Здесь ), элемент inspect выдает ошибку (index):161 Uncaught ReferenceError: WOGen is not defined.Так что по какой-то причине HTML не может найти вашу функцию.

Интересно, если я использую встроенную функцию - в моем случае, Date() - она ​​работает ( см. Здесь ).И если я добавлю ваш код в тег <script> перед этой кнопкой, используя WOGen(), он также будет работать ( см. Здесь ).

Так что я думаю, что проблема заключается в прослушивателе щелчковэта кнопка создается перед функцией, на которую она должна указывать, и это вызывает вашу проблему.Вы можете исправить это, создав прослушиватель в своем коде JavaScript после определения WOGen.Замените ваш тег кнопки на <button id='myButton'>Display</button> и в своем javascript добавьте следующий код после , определяя WOGen: 

document.getElementById('myButton').addEventListener('click', function() {
  document.getElementById("p1").innerHTML = WOGen();
}

См. Здесь для рабочего примеракода, использующего этот метод.

...