<button id="confirm" onclick="dis()" >确认订单</button> var but = document.getElementById('confirm').disabled = true;如何实现确认后原button中的文字改为“已确认”

您可以使用以下代码实现确认后将按钮文本更改为“已确认”：

HTML代码：

<button id="confirm" onclick="confirmOrder()">确认订单</button>

JavaScript代码：

function confirmOrder() {
  // 禁用按钮
  document.getElementById('confirm').disabled = true;
  // 更改按钮文本
  document.getElementById('confirm').innerHTML = "已确认";
}

这里，我们首先通过`document.getElementById('confirm')`获取按钮元素，然后将其禁用，即设置`disabled`属性为`true`。接着，我们再使用`innerHTML`属性将按钮文本更改为“已确认”。最后，我们将`confirmOrder()`函数绑定到按钮的`onclick`事件上，以便在用户单击按钮时触发该函数。

相关问题

<form id="password-form"> <div class="form-group"> <label for="current-password">当前密码</label> <input type="password" class="form-control" id="current-password" name="current-password" placeholder="请输入当前密码" required> <div class="invalid-feedback">请输入当前密码</div> </div> <div class="form-group"> <label for="new-password">新密码</label> <input type="password" class="form-control" id="new-password" name="new-password" placeholder="请输入新密码" required oninput="checkNewPassword()"> <span id="new-password-tip" style="color:red;"></span> </div> <div class="form-group"> <label for="confirm-password">确认密码</label> <input type="password" class="form-control" id="confirm-password" name="confirm-password" placeholder="请再次输入新密码" required oninput="checkConfirmPassword()"> <span id="confirm-password-tip" style="color:red;"></span> </div> <button type="submit" class="btn btn-primary" id="submit-btn">确认修改</button></form><script> function checkNewPassword() { const password = document.getElementById('new-password').value; const regex = /^(?=.[A-Z])(?=.)(?=.[0-9])(?=.[!@#$%^&*()_+-=[]{};':"\|,.<>/?]).{8,}$/; const isValid = regex.test(password); const tip = document.getElementById('new-password-tip'); if (isValid) { tip.innerHTML = ''; } else { tip.innerHTML = '密码必须包含大小写字母、数字和特殊字符，并且长度不小于8位'; } } function checkConfirmPassword() { const password = document.getElementById('new-password').value; const confirmPassword = document.getElementById('confirm-password').value; const tip = document.getElementById('confirm-password-tip'); if (password === confirmPassword) { tip.innerHTML = ''; } else { tip.innerHTML = '两次输入的密码不相同'; } } const form = document.getElementById('password-form'); const submitBtn = document.getElementById('submit-btn'); form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认的表单提交行为 const currentPassword = document.getElementById('current-password').value; const newPassword = document.getElementById('new-password').value; const confirmPassword = document.getElementById('confirm-password').value; // 发送 AJAX 请求到后台 const xhr = new XMLHttpRequest(); xhr.open('POST', '/change-password'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { alert('密码修改成功！'); } else { alert('密码修改失败，请重试！'); } } }; xhr.send(JSON.stringify({ currentPassword: currentPassword, newPassword: newPassword, confirmPassword: confirmPassword })); // 禁用提交按钮，防止重复提交 submitBtn.disabled = true; });</script>

这段代码是一个修改密码的表单，包括当前密码、新密码和确认密码三个输入框，以及一个提交按钮。在用户输入新密码和确认密码时，会进行格式和一致性检查，并在下方显示提示信息。当用户点击提交按钮时，会发送一个 AJAX 请求到后台，将当前密码、新密码和确认密码作为参数传递给服务器，如果修改成功则弹出提示框，否则也会弹出提示框。同时，为了防止用户重复提交，提交按钮会在点击后被禁用。

// 编辑数据 function editData(title, type) { const data = questionsData.find(q => q.title === title && q.type === type); title.value = data.title; type.value = data.type; options[0].value = data.options.A; options[1].value = data.options.B; options[2].value = data.options.C; options[3].value = data.options.D; answer.value = data.answer; score.value = data.score; } // 删除数据 function deleteData(title, type) { questionsData = questionsData.filter(q => !(q.title === title && q.type === type)); localStorage.setItem('questionsData', JSON.stringify(questionsData)); showData(); } // 选择类型 function selectType() { if (type.value === 'fill') { A.value = ''; B.value = ''; C.value = ''; D.value = ''; A.disabled = true; B.disabled = true; C.disabled = true; D.disabled = true; } else { A.disabled = false; B.disabled = false; C.disabled = false; D.disabled = false; } } // 显示数据 showData(); // 编辑和删除数据 const tbody = document.getElementById('tbody'); tbody.addEventListener('click', e => { const target = e.target; if (target.classList.contains('edit')) { editData(target.dataset.title, target.dataset.type); } else if (target.classList.contains('delete')) { const isConfirmed = confirm('确认删除此题目吗？'); if (isConfirmed) { deleteData(target.dataset.title, target.dataset.type); } } });为什么当我编辑完成 点击保存时不会实时更新并显示在页面上 且localstorage中也没有更新

这可能是因为你没有在保存数据时更新 questionsData 数组中对应的数据。在 editData 函数中，你只是更新了表单中的值，但没有将更新后的值写回 questionsData 数组中。你需要在保存数据时将表单中的值写回 questionsData 数组中，并重新写入 localStorage 中。这样，下次打开页面时就可以正确地加载更新后的数据了。你可以使用类似以下的代码将更新后的数据保存回 questionsData 和 localStorage 中：

function saveData() {
  // 获取表单中的值
  const title = document.getElementById('title');
  const type = document.getElementById('type');
  const A = document.getElementById('A');
  const B = document.getElementById('B');
  const C = document.getElementById('C');
  const D = document.getElementById('D');
  const answer = document.getElementById('answer');
  const score = document.getElementById('score');

  // 根据表单中的值构造一个新的数据对象
  const newData = {
    title: title.value,
    type: type.value,
    options: {
      A: A.value,
      B: B.value,
      C: C.value,
      D: D.value,
    },
    answer: answer.value,
    score: score.value,
  };

  // 更新 questionsData 数组中对应的数据
  const index = questionsData.findIndex(q => q.title === newData.title && q.type === newData.type);
  if (index !== -1) {
    questionsData[index] = newData;
  } else {
    questionsData.push(newData);
  }

  // 将更新后的数据保存回 localStorage 中
  localStorage.setItem('questionsData', JSON.stringify(questionsData));

  // 清空表单
  title.value = '';
  type.value = '';
  A.value = '';
  B.value = '';
  C.value = '';
  D.value = '';
  answer.value = '';
  score.value = '';

  // 显示更新后的数据
  showData();
}

这样，在编辑完成并点击保存时，数据会被正确地更新，并重新显示在页面上。