Измените текст кнопки на количество щелчков по кнопке

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

Впервые нажата кнопка должна сказать: «Вы нажали кнопку» второй «нажата кнопка снова третий в пятый раз„была нажата кнопка (число от 3 до 5) раз“ и шестой и далее он должен сказать «стоп!»

EDIT EDIT EDIT

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

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script src="q2.js" type="text/javascript"></script> 
</head> 
<body> 

<button type="button" onclick="go()">ClickMe</button> 

<p id="output"> 
</p> 

</body> 
</html>

JavaScript

function go() { 
    var out = document.getElementById("output"); 
    var x = "hi there"; 
    out.innerHTML = x; 
}

Что я должен сделать, чтобы сделать эту работу?

источник

2015-10-12 Mirthi

Привет @Mirthi, добро пожаловать в [SO] (http://stackoverflow.com/tour). Надеюсь, мы сможем ответить на ваш вопрос, если да, пожалуйста, примите ответ или сообщите нам, если вам нужна дополнительная помощь ... – WhiteHat

@WhiteHat Большое спасибо! это отличный сайт, я не ожидал получить ответ честно, но я был искренне удивлен и наполнился рельефом, когда увидел, что многие люди готовы помочь, спасибо вам, ребята! – Mirthi

Вам нужны кавычки вокруг btn1 (id = "btn1") –

-2

Вы можете сделать это:

'use strict'; 

let count = 0; 

// define this outside of function so it won't be defined over and over 
let out = document.getElementById('output'); 

let message; 

function go(e){ 
    e.preventDefault(); 
    count ++; 
    if(count === 1) message = 'You pressed the button!'; 
    if(count === 2) message = 'You pressed the button again'; 
    if(count > 1 && count < 6) message = `You pressed the button ${count} times!`; 
    if(count >= 6) message = 'Stop!'; 
    out.innerHTML = message; 
} 

// It's best practice to stay away from inline JS, you could define your click handler in your script block 
// For the following to work add id="btn1" to your button and remove the onclick handler 

document.getElementById('btn1').addEventListener('click', go);

источник

2015-10-12 22:42:38

Это избыток для счетчика кнопок .... –

@AdamBuchananSmith, что в этом переполнено? –

Я предполагаю, что это просто сводится к мнению тогда .. по вашему мнению, утверждение if чище, чем то, что я сделал. все, что я говорю, это то, что утверждение if меня раздражает неправильно ... И я не уверен, почему вы проголосовали за мой ответ ... lol –

использовать switch заявление, чтобы избежать вложенных if заявления ...

var testCount = 0; 
var out = document.getElementById("output"); 

function go(){ 
    testCount++; 
    switch (testCount) { 
    case 1: 
     out.innerHTML = 'you pressed the button'; 
     break; 

    case 2: 
     out.innerHTML = 'you pressed it again'; 
     break; 

    case 3: 
    case 4: 
    case 5: 
     out.innerHTML = 'you pressed the button ' + testCount + ' times'; 
     break; 

    default: 
     out.innerHTML = 'stop!!'; 
     break; 
    } 
}

источник

2015-10-12 22:43:52 WhiteHat

Я тоже думал о том, чтобы сделать переключатель, но я думаю, что использование условия> 1 && <= 6 было бы лучше, чем писать дублирующие операторы switch для 2, 3, 4 и 6. Кажется, что они чище. –

Patato Potato, @realseanp, вы раскалываете волосы в этот момент. –

@AdamBuchananSmith Я предполагаю, что это спустится до более чистого кода. –

Или как насчет этого?

'use strict'; 

let count = 0; 

// define this outside of function so it won't be defined over and over 
let out = document.getElementById('output'); 

let message; 

function go(e){ 
    e.preventDefault(); 
    count ++; 
    out.innerHTML = count > 1 ? count === 2 ? 'You pressed the button again!' : count > 1 && count < 6 ? `You pressed the button ${count} times!` : 'Stop!' : 'You pressed the button'; 
} 

// It's best practice to stay away from inline JS, you could define your click handler in your script block 
// For the following to work add id="btn1" to your button and remove the onclick handler 

document.getElementById('btn1').addEventListener('click', go);

источник

2015-10-13 00:07:29

@AdamBuchananSmith как насчет этого? –

, если js тоже отработал этот, если утверждение кажется быстрым между коммутатором, тройным и, если. –

Спасибо, что помогли мне! Но, к сожалению, как и код выше вашего, он, похоже, не работает. Я изменил свою кнопку: Это правильный код, который вы попросили меня сменить эту кнопку? Извините, если я ошибаюсь, я новичок во всей этой программе программирования. – Mirthi

Измените текст кнопки на количество щелчков по кнопке

ответ

Смежные вопросы