HomeLập trìnhJavaScriptKhông thể chuyển...

Không thể chuyển giá trị đầu vào vào biến JavaScript


Hãy tưởng tượng kịch bản sau đây – 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:

<input id="search" placeholder="Search for..."></input>
<button value="send" id="submit" onclick="myFunction()">Search</button>

<div id="alpha"></div>
function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

Nhưng khi bạn tải trang bạn 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 test biến bên ngoài myFunction?

Phạm vi trong JavaScript

Lý do bạn không thể truy cập test bên ngoài của myFunction là do phạm vi. Một cách khác để mô tả phạm vi là bối cảnh.

Bởi vì test đã được xác định hoặc tạo ra trong myFunctionnó chỉ khả dụng trong ngữ cảnh hoặc phạm vi của myFunction chính nó. Đang cố đăng nhập test bên ngoài của myFunction sẽ gây ra lỗi.

Một cách khác để đặt nó là test biến là phạm vi chức năng và chỉ có thể được ghi lại từ bên trong myFunction.

Một cách dễ dàng để khắc phục điều này là đăng nhập test từ bên trong myFunction. 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 thêm  Cách tạo biểu đồ thanh phân kỳ bằng thư viện biểu đồ 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 trong phạm vi hàm từ bên ngoài hàm mà nó được xác định, nhưng có một số cách để sử dụng giá trị của test trong suốt phần còn lại của chương trình.

Lưu trữ giá trị của test như một biến toàn cầu

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 để thực hiện test có sẵn ở 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 test khi nào myOtherFunction được gọi là. Nhưng điều này giả định rằng đầu vào đã có một số văn bản trong đó và myFunctionđó là giá trị của testđược gọi trước myOtherFunction.

Đó là nơi mà sự hiểu biết vững chắc về JavaScript không đồng bộ trở nên hữu ích. Đọc thêm về nó trong bài viết này: Sự phát triển của Async JavaScript: From Callbacks, to Promises, to Async/Await

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 test từ bên ngoài chức năng ban đầu mà nó được xác định là chỉ cần trả lại 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 test.

Sau đó, bạn có thể tạo một nút khác để nối thêm giá trị của test vào trang và đính kèm myOtherFunction đến nút đó.

Đọc thêm  Cách sử dụng Bộ lọc, Bản đồ và Giảm để có mã dễ bảo trì hơn

Ví dụ:

<input id="search" placeholder="Search for..."></input>
<button value="send" id="submit" onclick="myFunction()">Search</button>
<button value="append" id="append" onclick="myOtherFunction()">Append</button>

<div id="alpha"></div>
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:

Peek-2020-06-10-20-46



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status