กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • เพิ่มฟังก์ชั่นให้กดปุ่มเพื่อเพิ่มข้อมูลโดยไม่ต้องพิมพ์

    December 24, 2023
    ถาม
<label for="topic">Topic:</label>
<input type="text" id="topic" name="topic" required>

i want to add function add data by click button , Example button a "fire" button b "water" that is make we convenience 
ตอบ

To achieve this, you can use JavaScript to add an event listener to the buttons and update the value of the input field when a button is clicked. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Topic Selector</title>
</head>
<body>

<label for="topic">Topic:</label>
<input type="text" id="topic" name="topic" required>

<button id="fireButton">Fire</button>
<button id="waterButton">Water</button>

<script>
  // Get the input element
  var topicInput = document.getElementById('topic');

  // Get the buttons
  var fireButton = document.getElementById('fireButton');
  var waterButton = document.getElementById('waterButton');

  // Add click event listeners to the buttons
  fireButton.addEventListener('click', function() {
    // Update the input value when the "Fire" button is clicked
    topicInput.value = 'Fire';
  });

  waterButton.addEventListener('click', function() {
    // Update the input value when the "Water" button is clicked
    topicInput.value = 'Water';
  });
</script>

</body>
</html>
In this example, two buttons with IDs 'fireButton' and 'waterButton' are created. When either button is clicked, the corresponding event listener is triggered, updating the value of the 'topic' input field accordingly. You can extend this example to include more buttons and topics as needed.

ถาม
I want to be able to add value. without deleting the previous values that were already added and leaving 1 tap
ตอบ
If you want to accumulate values without replacing the existing value, you can modify the JavaScript code to append the new value instead of replacing the existing one. Here's an updated example:

<label for="topic">Topic:</label>
<input type="text" id="topic" name="topic" required>

<button id="fireButton">Fire</button>
<button id="waterButton">Water</button>

<script>
  // Get the input element
  var topicInput = document.getElementById('topic');

  // Get the buttons
  var fireButton = document.getElementById('fireButton');
  var waterButton = document.getElementById('waterButton');

  // Add click event listeners to the buttons
  fireButton.addEventListener('click', function() {
    // Append the new value with a space if there's an existing value
    topicInput.value += (topicInput.value ? ' ' : '') + 'Fire';
  });

  waterButton.addEventListener('click', function() {
    // Append the new value with a space if there's an existing value
    topicInput.value += (topicInput.value ? ' ' : '') + 'Water';
  });
</script>

In this version, the += operator is used to append the new value to the existing value of the input field. It also adds a space before the new value if there's already an existing value, so that each added value is separated by a space. This way, you can accumulate multiple values in the input field without replacing the previous ones.

ถาม
When the entered value already exists, a warning will appear and cannot be added again.
ตอบ
To prevent adding the same value again and show a warning,

User
When the entered value already exists, a warning will appear and cannot be added again.
ChatGPT
Certainly! To achieve that, we can create a function that checks if the value already exists in the input field. If it does, display a warning; otherwise, append the new value. Here's the modified example:

<label for="topic">Topic:</label>
<input type="text" id="topic" name="topic" required>

<button id="fireButton">Fire</button>
<button id="waterButton">Water</button>

<script>
  // Get the input element
  var topicInput = document.getElementById('topic');

  // Function to check if the value already exists
  function isValueExists(value) {
    return topicInput.value.split(' ').includes(value);
  }

  // Get the buttons
  var fireButton = document.getElementById('fireButton');
  var waterButton = document.getElementById('waterButton');

  // Add click event listeners to the buttons
  fireButton.addEventListener('click', function() {
    // Check if the value already exists
    if (!isValueExists('Fire')) {
      // Append the new value with a space if there's an existing value
      topicInput.value += (topicInput.value ? ' ' : '') + 'Fire';
    } else {
      // Display a warning if the value already exists
      alert('Fire is already added.');
    }
  });

  waterButton.addEventListener('click', function() {
    // Check if the value already exists
    if (!isValueExists('Water')) {
      // Append the new value with a space if there's an existing value
      topicInput.value += (topicInput.value ? ' ' : '') + 'Water';
    } else {
      // Display a warning if the value already exists
      alert('Water is already added.');
    }
  });
</script>

In this version, the isValueExists function checks whether the given value already exists in the input field. If it does, the corresponding warning is displayed, and the new value is not appended. Otherwise, the new value is appended with a space if there's an existing value.

    ทำให้โค๊ดสั้นลง

    possible to shorty this code ..
  // Add click event listeners to the buttons
  fireButton.addEventListener('click', function() {
    // Check if the value already exists
    if (!isValueExists('Fire')) {
      // Append the new value with a space if there's an existing value
      topicInput.value += (topicInput.value ? ' ' : '') + 'Fire';
    } else {
      // Display a warning if the value already exists
      alert('Fire is already added.');
    }
  });

  waterButton.addEventListener('click', function() {
    // Check if the value already exists
    if (!isValueExists('Water')) {
      // Append the new value with a space if there's an existing value
      topicInput.value += (topicInput.value ? ' ' : '') + 'Water';
    } else {
      // Display a warning if the value already exists
      alert('Water is already added.');
    }
  });

    ตอบ

    Certainly! You can create a function that handles the button click events in a more concise way. Here's a shortened version of the code:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Topic Selector</title>
</head>
<body>

<label for="topic">Topic:</label>
<input type="text" id="topic" name="topic" required>

<button id="fireButton" onclick="handleButtonClick('Fire')">Fire</button>
<button id="waterButton" onclick="handleButtonClick('Water')">Water</button>

<script>
  // Get the input element
  var topicInput = document.getElementById('topic');

  // Function to check if the value already exists
  function isValueExists(value) {
    return topicInput.value.split(' ').includes(value);
  }

  // Function to handle button click events
  function handleButtonClick(value) {
    // Check if the value already exists
    if (!isValueExists(value)) {
      // Append the new value with a space if there's an existing value
      topicInput.value += (topicInput.value ? ' ' : '') + value;
    } else {
      // Display a warning if the value already exists
      alert(`${value} is already added.`);
    }
  }
</script>


In this version, I created a handleButtonClick function that takes the value as a parameter. The onclick attribute of each button is set to call this function with the corresponding value. This helps reduce redundancy in the code.

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories

Uncategorized