Gửi giá trị văn bản đầu vào tới chức năng javascript

Hãy tưởng tượng tình huống sau – bạn có một đầu vào đơn giản và một nút. Khi người dùng nhập vào đầu vào và nhấn nút, văn bản từ đầu vào sẽ được ghi vào bảng điều khiển

Đây là những gì bạn có cho đến nay

Search

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

Nhưng khi bạn tải trang, bạn sẽ thấy Uncaught ReferenceError: test is not defined trong bảng điều khiển

Điều gì đang xảy ra ở đây và tại sao bạn không thể truy cập biến

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 bên ngoài

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

1?

Phạm vi trong JavaScript

Lý do bạn không thể truy cập

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 bên ngoài

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

1 là do phạm vi. Một cách khác để mô tả phạm vi là bối cảnh

Bởi vì

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 đã được xác định hoặc tạo ra trong

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

1, nên nó chỉ khả dụng trong ngữ cảnh hoặc phạm vi của chính

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

1. Cố gắng đăng nhập

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 bên ngoài

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

1 sẽ gây ra lỗi

Một cách khác để nói rằng biến

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 nằm trong phạm vi chức năng và chỉ có thể được ghi lại từ bên trong

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

1

Một cách dễ dàng để khắc phục điều này là ghi nhật ký

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 từ bên trong

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

1. Sau đó, bất cứ khi nào nhấn nút, giá trị hiện tại của đầu vào sẽ được ghi vào bảng điều khiển

function myFunction() {
  const test = document.getElementById("search").value;
  console.log(test);
}

Bạn có thể đọc thêm về phạm vi trong JavaScript tại đây. Giới thiệu về phạm vi trong JavaScript

Cách truy cập một biến bên ngoài một hàm

Mặc dù không thể truy cập trực tiếp vào một biến phạm vi chức năng từ bên ngoài chức năng mà nó được xác định, nhưng có một số cách để sử dụng giá trị của

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 trong suốt phần còn lại của chương trình

Lưu trữ giá trị của function myFunction() { const test = document.getElementById("search").value; } console.log(test);0 dưới dạng biến toàn cục

Phạm vi toàn cầu là mức cao nhất trong chương trình của bạn, bên ngoài tất cả các chức năng khác. Các biến trong phạm vi toàn cầu có sẵn trong suốt phần còn lại của chương trình của bạn

Vì vậy, một cách dễ dàng để cung cấp

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 ở mọi nơi là lưu nó dưới dạng biến toàn cục. Ví dụ

let test = '';

function myFunction() {
  test = document.getElementById("search").value;
}

function myOtherFunction() {
  console.log(test);
}

Sau đó, bạn sẽ có thể truy cập giá trị của

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 khi

function myFunction() {
  const test = document.getElementById("search").value;
  console.log(test);
}

4 được gọi. Nhưng điều này giả định rằng đầu vào đã có một số văn bản trong đó và

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

1, giá trị được đặt là

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0, được gọi trước

function myFunction() {
  const test = document.getElementById("search").value;
  console.log(test);
}

4

Đó là nơi mà sự hiểu biết vững chắc về JavaScript không đồng bộ có ích. Đọc thêm về nó trong bài viết này. Sự phát triển của JavaScript không đồng bộ. Từ Gọi lại, đến Lời hứa, đến Không đồng bộ/Đang chờ

Trả về bài kiểm tra từ chức năng

Một cách khác để bạn có thể truy cập

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 từ bên ngoài chức năng ban đầu mà nó được xác định là chỉ cần trả về nó từ chức năng đó. Sau đó, khi bạn gọi nó từ chức năng khác, bạn sẽ có quyền truy cập vào

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0

Sau đó, bạn có thể tạo một nút khác để nối giá trị của

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

0 vào trang và đính kèm

function myFunction() {
  const test = document.getElementById("search").value;
  console.log(test);
}

4 vào nút đó

Ví dụ

Search
Append

function myFunction() {
  const test = document.getElementById("search").value;
  return test;
}

function myOtherFunction() {
  const myDiv = document.getElementById("alpha");
  myDiv.innerText = myFunction();
}

Và đây là hành động

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Phương thức “getElementById()” truy cập một phần tử có Id được chỉ định. Phương pháp này có thể được áp dụng để truy cập id của các trường nhập và các nút để nhận và đặt giá trị văn bản

cú pháp

tài liệu. getElementById( elementID )

Ở đây, “elementID” đề cập đến Id được chỉ định của một phần tử

Ví dụ dưới đây giải thích khái niệm được thảo luận

Ví dụ
Đầu tiên, bao gồm hai trường loại đầu vào và các nút riêng biệt để nhận và đặt giá trị văn bản đầu vào với sự kiện “onclick” sẽ truy cập các chức năng đã chỉ định.

< loại đầu vào = "văn bản" id< . value = '' " = "getText" name= "getText" onclick= "this.value = '' "/>
< khi nhấp vào nút = "getText()">Get Valuebutton>
<button onclick= "getAndSetText()">Set Valuebutton>
<input type= "text" id= "setText" name= "setText" onclick= "this.value = '' "/>

Sau đó, lấy giá trị của trường đầu vào với sự trợ giúp của tài liệu. phương thức getElementById()

tài liệu. getElementById('getText').giá trị= "Nhập vào đây";

Bây giờ, hãy khai báo một hàm có tên là “getAndSetText()”. Tại đây, tìm nạp trường đầu vào có id “getText” và chuyển giá trị đầu vào sang trường đầu vào tiếp theo có id “setText”

function getAndSetText (){
    var setText= document.getElementById('getText').giá trị;
    tài liệu. getElementById('setText').giá trị= setText ;
}

Tương tự, hãy xác định một hàm có tên là “getText()”. Sau đó, lấy trường nhập có id “getText” và chuyển giá trị cụ thể vào hộp cảnh báo để nhận giá trị văn bản đầu vào

hàm getText (){
    var getText = document.getElementById('getText').giá trị;
    cảnh báo ( getText );
}

đầu ra

Phương pháp 2. Nhận và đặt giá trị văn bản đầu vào trong JavaScript bằng tài liệu. Phương thức getElementsByClassName()

Phương thức “getElementByClassName()” truy cập một phần tử với sự trợ giúp của tên lớp đã chỉ định. Tương tự, phương pháp này có thể được áp dụng để truy cập lớp của trường nhập và các nút để nhập và đặt giá trị văn bản

cú pháp

tài liệu. getElementsByClassName( tên lớp )

Trong cú pháp trên, “classname” đại diện cho tên lớp của các phần tử

Ví dụ
Tương tự như ví dụ trước, trước tiên chúng ta sẽ truy cập vào trường nhập liệu đầu tiên với tên lớp “getText”. Sau đó, xác định một hàm có tên là “getAndSetText()” và lấy trường đầu vào đã chỉ định dựa trên tên lớp của nó và đặt giá trị trong trường đầu vào tiếp theo.

tài liệu. getElementByClassName('getText').giá trị= "Nhập vào đây";          
function getAndSetText()
    {
   var setText= document.getElementByClassName('getText').giá trị;
   tài liệu. getElementById('setText').giá trị= setText ;
 < }

Tương tự như vậy, hãy xác định một hàm có tên là “getText()”, thêm tên lớp của trường nhập đầu tiên và chuyển giá trị cụ thể vào hộp cảnh báo để hiển thị giá trị được tìm nạp

hàm getText () {
    var getText = document.getElementByClassName('getText').giá trị;
    cảnh báo ( getText );
}

Việc triển khai này sẽ mang lại kết quả như sau

Phương pháp 3. Nhận và Đặt Giá trị Văn bản Đầu vào trong Javascript Sử dụng “tài liệu. phương thức querySelector()”

Tài liệu. querySelector()” tìm nạp phần tử đầu tiên khớp với bộ chọn đã chỉ định và phương thức addEventListener() có thể thêm trình xử lý sự kiện vào phần tử đã chọn. Các phương pháp này có thể được áp dụng để lấy id của trường đầu vào và các nút và áp dụng trình xử lý sự kiện cho chúng

cú pháp

tài liệu. Bộ chọn truy vấn( Bộ chọn CSS )

Ở đây, "Bộ chọn CSS" đề cập đến một hoặc nhiều bộ chọn CSS

Nhìn vào ví dụ sau

Ví dụ
Đầu tiên, bao gồm các loại đầu vào với giá trị giữ chỗ của chúng và các nút để nhận và đặt giá trị văn bản đầu vào.

< loại đầu vào = "văn bản" id< = "input-get" placeholder= "Get Value">
<button id="get">GETbutton>
<input type= "text" id= "input-set" placeholder= "Set Value">
<button id="set">SETbutton>

Tiếp theo, tìm nạp các trường đầu vào và các nút bằng cách sử dụng “tài liệu. phương thức querySelector()”

let buttonGet = tài liệu. Bộ chọn truy vấn('#get');
let buttonSet= document.Bộ chọn truy vấn('#set');
let getInput= document.QuerySelector('#input-get');
let setInput= document.Bộ chọn truy vấn('#input-set');
let result= document.Bộ chọn truy vấn('#result');

Sau đó, bao gồm một trình xử lý sự kiện có tên là “nhấp chuột” cho cả hai nút để nhận và đặt giá trị tương ứng

nútNhận. addEventListener('click', () =>{
    result.innerText= getInput. giá trị;
}); .
buttonSet.addEventListener('click', () =>{
    getInput.giá trị= setInput. giá trị;
});

đầu ra

Chúng tôi đã thảo luận về các phương pháp đơn giản nhất để nhận và đặt giá trị văn bản đầu vào trong JavaScript

Phần kết luận

Để nhận và đặt giá trị văn bản đầu vào trong JavaScript, hãy sử dụng “tài liệu. getElementById()” hoặc phương thức

"tài liệu. getElementsByClassName()” để truy cập trường nhập liệu được chỉ định và các nút dựa trên id hoặc tên lớp của chúng, sau đó đặt giá trị của chúng. Hơn nữa, “tài liệu. querySelector()” cũng có thể được sử dụng để nhận và đặt giá trị văn bản đầu vào trong JavaScript. Blog này đã giải thích các phương pháp để nhận và đặt giá trị văn bản đầu vào trong JavaScript

Làm cách nào để chuyển giá trị văn bản cho hàm JavaScript?

Làm cách nào để chuyển dữ liệu biểu mẫu sang hàm JavaScript?

Làm cách nào để gán giá trị cho trường đầu vào trong JavaScript?

Làm cách nào để gọi hàm JavaScript trong văn bản đầu vào?