Question

我尝试构建一个基于浏览器的文本RPG作为改善我的JavaScript的项目。看起来像这样： Browser based Text RPG。

现在，我有一个单击EventListener的按钮。单击该按钮时，我将表单的输入存储到一个名为playerName的变量中，并通过修改一个空段的innerHTML来返回玩家名称和一些文本。

JS：

def send_leave_request(request):
    form = MakeLeaveForm()
    if request.method == 'POST':
        form = MakeLeaveForm(request.POST)
        if form.is_valid():
            leave_days = form.cleaned_data['day']
            org = form.cleaned_data['organization']
            start_day = form.cleaned_data['start_day']
            end_day = form.cleaned_data['end_day']
            diff = end_day - start_day
            leave_days = diff.days
            print('org',org)
            if leave_days > request.user.staff.organization.max_leave_days:
                messages.error(request,'Sorry can not be sent.Your leave days is greater than {}.'.format(request.user.staff.organization.max_leave_days))
                return redirect('organization:view_leaves')
            else:
                leave = form.save(commit=False)
                leave.staff = request.user
                leave.organization = org
                leave.save()
                return redirect('organization:view_leaves')
    return render(request,'organization/send_leaves.html',{'form':form})

def accept_leave(request,pk):
    leave = get_object_or_404(Leave, pk=pk)
    leave.is_accepted = True
    leave.is_rejected = False
    leave.day = ? 
    leave.save()
    return redirect('organization:leave_detail',leave.pk)

HTML：

let input = document.querySelector("#input");
let button = document.querySelector("#mainButton");
let textView = document.querySelector("#textView");

let buttonPress = function() {
  button.addEventListener("click", function() {
    if (input.value.length === 0) {
      alert("Please enter a valid Name!");
      //Evaluate Player Name
    } else if (input.value.length >= 1) {
      let playerName = input.value;
      input.value = "";
      textView.innerHTML = `Hi there ${playerName}, your adventure begins shortly! Where do you come from?`;
      input.placeholder = "Origin";
    }
  });
};

buttonPress();

我尝试通过按相同的按钮来弄清楚基本要在同一页上继续执行的操作。因此，在返回名称后，我想更改文本，通过按SAME按钮询问播放器的来源。它以某种方式伤了我的大脑。

如果有人对显示我的文字有更好的建议，那我就会不知所措。

TL; DR：如何将同一按钮用于多种功能？

Answer 1

尝试对一个按钮使用多种功能：

button.addEventListener("click", function(){alert("click1")}, false);
button.addEventListener("click", function(){alert("click2")}, false);

Answer 2

我希望这对您有用：

在输入名称中添加名称

<input type="text" name="name" id="input" placeholder="Enter your name" />

js文件：

let button = document.querySelector("#mainButton");

let playerName = "";
let playerOrigin = "";

(function() {
  button.addEventListener("click", function() {
    let input = document.querySelector("#input");
    let textView = document.querySelector("#textView");
    if (input.value.length === 0) {
      alert("Please enter a valid Name!");
      //Evaluate Player Name
    } else if (input.value.length >= 1) {
      if (input.name === 'name') {
        playerName = input.value;
        input.value = "";
        textView.innerHTML = `Name : ${playerName}, Origin : ${playerOrigin}`;
        input.placeholder = "Origin";
        input.name = "origin";
      } else if (input.name === 'origin') {
        playerOrigin = input.value;
        input.value = "";
        textView.innerHTML = `Name : ${playerName}, Origin : ${playerOrigin}`;
        input.placeholder = "Enter your name";
        input.name = "name";
      }
    }
  });
})();

如何在JavaScript中使用相同的按钮接连触发点击事件？

2 个答案: