Блог

Главная - Вопросы по программированию - Вызов функции с помощью onclick, а внутри этой функции вызов другой функции с помощью onclick

Вызов функции с помощью onclick, а внутри этой функции вызов другой функции с помощью onclick

#javascript #css #onclick

#javascript #css #onclick

Вопрос:

Я пытаюсь вызвать функцию с помощью onclick, но эта функция уже находится внутри другой функции, которая вызывается через onclick.

На самом деле я хочу продолжать делать это примерно 6-7 раз.

Код может помочь уменьшить путаницу:

HTML JS:

 {
<body>
<script type="text/javascript">

function abc()
{
    document.getElementById("first").className='disc';
    document.getElementById("first").onClick="def();";
}
function def()
{
    document.getElementById("first").className='disco';
}

</script>
<input type="button" value="Change Color of this text" id="first" class="" onclick="abc();">
</body>

}

CSS:

 .disc 
{
    color: red;
}
.disco
{
    color: yellow;
}

Я хочу менять цвет текста на кнопке каждый раз, когда пользователь нажимает на нее. Так в чем проблема? Он просто меняется на красный, но не на желтый, когда я нажимаю на него еще раз.

Комментарии:

1. Где вы видите код, который изменит его на обратный желтый? Я не вижу ни одного.

2. Почему бы просто не использовать hover в вашем css?

3. Это НЕ изменит его ОБРАТНО на желтый. Сначала он будет черным, при первом щелчке он изменится на красный, при втором щелчке он должен стать желтым. Это то, что я хочу

Ответ №1:

Я думаю, что это должно сработать для вас в соответствии с вашим требованием в комментарии:-

Javascript

 function abc(){
    if(document.getElementById("first").className == "" || document.getElementById("first").className == "disco"){
        document.getElementById("first").className = "disc";
    }
    else if(document.getElementById("first").className=="disc"){
        document.getElementById("first").className="disco";
    }    
}

Вам не нужно ничего менять в HTML и css.

Ответ №2:

Вместо изменения функции с abc() на def(), в чем я не уверен, вы можете сделать что-то подобное .. Почему бы вам просто не использовать 1 функцию и не проверить текущее имя класса, как в приведенном ниже коде:

 function abc()
{
    if(document.getElementById("first").className == "disco" || document.getElementById("first").className == "") //change from red to yellow
       document.getElementById("first").className="disc";
    else //change from yellow to red
       document.getElementById("first").className="disco"; 
}

Ответ №3:

 var first = document.getElementById("first"), counter = 0;
first.addEventListener('click', function () {
    first.className = (counter % 2) ?  'disc' : 'disco';
    counter  =1;
});

http://jsfiddle.net/fNW23/

исправленный код и более надежное решение.