javascript onclick change function

В настоящее время я работаю над студенческим проектом, и я давно застрял в этой проблеме. Я хочу выполнить на одной кнопке разные функции.javascript onclick change function

Это мои кнопки:

<button id="b1" type="button" onclick="a1Change(this)"><p id="a1">Answer 1</p></button> 
<button id="b2" type="button" onclick="a1Change(this)"><p id="a2">Answer 2</p></button>

Теперь у меня есть функция JS:

function a1Change(elem) { 

if (elem.id == "b1") { 

    document.getElementById("a1").innerHTML = "Answer 1.1"; 
    document.getElementById("a2").innerHTML = "Answer 1.2"; 

} else if (elem.id == "b2") { 

    document.getElementById("a1").innerHTML = "Answer 2.1"; 
    document.getElementById("a2").innerHTML = "Answer 2.2"; 
}

При нажатии на первую кнопку, она меняется 'Ответ 1' до 'ответа 1.1' и «Ответ 2» на «Ответ 1.2». Все хорошо.

Но теперь я хочу снова нажать кнопку 1, и он должен измениться на «Ответ 1.1.1» и «Ответ 1.1.2».

И вот я застрял. Я попытался изменить функцию onclick после выполнения a1Change, но я не знаю, как это сделать. Или, может быть, у вас есть лучшие идеи, как это решить.

источник

2015-11-06 Gre3eN

Вы пропускаете значительную часть логики здесь. Вы никогда не получите результаты, которые вы ищете, - динамически генерируемый ответ «число» - с подходом, где вы жестко кодируете HTML. Вы пытались реализовать эту логику вообще? Если да, можете ли вы показать, что, поскольку неясно, какая бизнес-логика для того, когда и как вы меняете этот «номер», зависит от вашего вопроса. Желаемые взаимодействия между двумя кнопками (или даже почему есть две кнопки) не ясны. Почему бы не однозначно идентифицировать одну кнопку, чтобы увеличить первый компонент числа, другой - добавить числовой компонент и т. Д.? –

Эй, спасибо за ваш ответ. Наш проект - это игра, в которой вы можете выбрать разные ответы. Так что речь идет не о добавлении .1 или. .2. Это просто замена текста, который мы добавим позже. – Gre3eN

Вы можете сделать что-то вроде этого, используя переменную

var i = 0; 
 
function a1Change(elem) { 
 
    var a1 = document.getElementById("a1"), 
 
    a2 = document.getElementById("a2"); 
 
    if (elem.id == "b1" && i != 1) { 
 
    // check previously clicked button by checking value of i 
 
    a1.innerHTML = "Answer 1.1"; 
 
    a2.innerHTML = "Answer 1.2"; 
 
    i = 1; 
 
    // update value of i based on click button 
 
    } else if (elem.id == "b2" && i != 2) { 
 
    // check previously clicked button by checking value of i 
 
    a1.innerHTML = "Answer 2.1"; 
 
    a2.innerHTML = "Answer 2.2"; 
 
    i = 2; 
 
    // update value of i based on click button 
 
    } else { 
 
    // in case same button is clicked more than once just concate string with it 
 
    a1.innerHTML += '.1'; 
 
    a2.innerHTML += '.2'; 
 
    } 
 
}

<button id="b1" type="button" onclick="a1Change(this)"> 
 
    <p id="a1">Answer 1</p> 
 
</button> 
 
<button id="b2" type="button" onclick="a1Change(this)"> 
 
    <p id="a2">Answer 2</p> 
 
</button>

источник

2015-11-06 18:45:39

Спасибо. Это звучит неплохо. Я попробую. – Gre3eN

Это то, что вы собираетесь делать? Если это так, вы можете просто разделить текст кнопки на пробел, и весь материал 1.1.1 станет вторым индексом. Затем, в зависимости от того, нажала ли вы первую кнопку, просто измените текст на Answer 1. плюс текст, который вы разделите.

function a1Change(elem) { 
 

 
    if (elem.id == "b1") { 
 

 
     var ans1 = document.getElementById("a1").innerHTML.split(' '); 
 
     var ans2 = document.getElementById("a2").innerHTML.split(' '); 
 

 
     document.getElementById("a1").innerHTML = "Answer 1." + ans1[1] ; 
 
     document.getElementById("a2").innerHTML = "Answer 1." + ans2[1]; 
 

 
    } else if (elem.id == "b2") { 
 
     
 
     var ans1 = document.getElementById("a1").innerHTML.split(' '); 
 
     var ans2 = document.getElementById("a2").innerHTML.split(' '); 
 

 
     document.getElementById("a1").innerHTML = "Answer 2." + ans1[1] ; 
 
     document.getElementById("a2").innerHTML = "Answer 2." + ans2[1]; 
 
    } 
 
}

<button id="b1" type="button" onclick="a1Change(this)"><p id="a1">Answer 1</p></button> 
 
<button id="b2" type="button" onclick="a1Change(this)"><p id="a2">Answer 2</p></button>

источник

2015-11-06 19:23:55 mcon

Так что спасибо за вашу помощь ребята. Ваши идеи вдохновили меня на мой собственный подход, который теперь отлично работает для меня. Я не опубликовал весь код, но вы можете продолжить этот метод совсем немного. Просто нужно добавить все больше и больше переменных.

Извините за всех немецких в моем решении. Надеюсь, это все еще понятно.

<!DOCTYPE html> 
<html> 
<body> 
<p id="s1">Hi, wie gehts?</p> 

<button id="b1" type="button" onclick="a1Change(this)"><p id="a1">Gut. (Antwort 1)</p></button> 
<button id="b2" type="button" onclick="a1Change(this)"><p id="a2">Ganz gut (Antwort 2)</p></button> 
<button id="b3" type="button" onclick="a1Change(this)"><p id="a3">Naja, nicht so geil. (Antwort 3)</p></button> 
<button id="b4" type="button" onclick="a1Change(this)"><p id="a4">Echt beschissen. (Antwort 4)</p></button>

var x = 0; 
var y = 0; 
var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 

function a1Change(elem) { 

x += 1; 
y += 1; 
x1 += 1; 
y1 += 1; 
x2 += 1; 
y2 += 1; 

var a1 = document.getElementById("a1"), 
    a2 = document.getElementById("a2"), 
    a3 = document.getElementById("a3"), 
    a4 = document.getElementById("a4"), 
    s1 = document.getElementById("s1"); 


if ((elem.id == "b1" || elem.id == "b2") && x == 1) { 

    a1.innerHTML = "Und wie gehts dir? (Antwort 1.1)"; 
    a2.innerHTML = "Alles gut? (Antwort 1.2)"; 
    a3.innerHTML = "Hast du viel zu tun? (Antwort 1.3)"; 
    a4.innerHTML = "Wie gehts mit der Arbeit? (Antwort 1.4)"; 
    s1.innerHTML = "Schoen."; 
    x += 1; 


} else if ((elem.id == "b3" || elem.id == "b4") && y == 1) { 

    a1.innerHTML = "Mein Chef ist suuuper nervig! (Antwort 3.1)"; 
    a2.innerHTML = "Die Arbeit ist echt anstrengend ... (Antwort 3.2)"; 
    a3.innerHTML = "Lisbeth hat mich verlassen :((Antwort 3.3)"; 
    a4.innerHTML = "ICH hab meine Freundin stehen lassen 8) (Antwort 3.4)"; 
    s1.innerHTML = "Oh nein, was ist denn los?"; 
    y += 1; 

} else if ((elem.id == "b1" || elem.id == "b2") && x == 3 && y < 3) { 

    a1.innerHTML = "Schoen zu hoeren. (Antwort 1.1.1)"; 
    a2.innerHTML = "Das freut mich. (Antwort 1.1.2)"; 
    a3.innerHTML = "Ist Anna eigentlich gegangen? (Antwort 1.1.3)"; 
    a4.innerHTML = "Ich hab gehoert du hast dich von deiner Freundin getrennt? (Antwort 1.1.4)"; 
    s1.innerHTML = "Bei mir ist alles wie beim Alten."; 
    x1 += 1; 

} else if ((elem.id == "b3" || elem.id == "b4") && x == 3 && y < 3) { 

    a1.innerHTML = "Ja, kenn ich. (Antwort 1.3.1)"; 
    a2.innerHTML = "Bei mir genau dasselbe! (Antwort 1.3.2)"; 
    a3.innerHTML = "Kriegst du inzwischen mehr Lohn? (Antwort 1.3.3)"; 
    a4.innerHTML = "Du solltest dich echt um eine Gehaltserhoehung kuemmern! (Antwort 1.3.4)"; 
    s1.innerHTML = "Ach die Arbeit ist stressig wie immer."; 
    x2 += 1;

источник

2015-11-07 01:56:30 Gre3eN

javascript onclick change function

ответ

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