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 “ title” sẽ truy cập các chức năng đã chỉ định.