자바 스크립트 변수 범위 및 JQuery에서 사용

나는 자바 스크립트 및 jquery에 대한 지식이 거의 없지만 다음 코드를 함께 넣을 수있었습니다.자바 스크립트 변수 범위 및 JQuery에서 사용

html 페이지의 "nameCreationButton"버튼을 클릭하면 HTML 페이지의 div에 "name"결과를 추가하고 싶습니다. "nameCreationButton"을 클릭하면 아무 일도 일어나지 않습니다.

변수 'name'이 'generator'함수 외부에 선언되었으므로 내 jquery가이 변수에 액세스 할 수 있어야합니다. 맞습니까? 나는 이것을 보면서 몇 시간을 보냈는데, 왜 그것이 효과가 없을지 이해하지 못해 바보가된다.

function generator(){ 

    var firstName = ["John","Mike","Robert","Patrick"]; 
    var lastName = ["Smith","Johnson","Williams","Anderson"]; 

    var randomNumber1 = parseInt(Math.random() * firstName.length); 
    var randomNumber2 = parseInt(Math.random() * lastName.length); 
    var name = firstName[randomNumber1] + " " + lastName[randomNumber2]; 
} 

var name; 

generator(); 

$(document).ready(function(){ 
$(".nameCreationButton").click(function(){ 
    $(".displayName").append('name'); 
}); 
});

다음은 내 HTML 페이지입니다. 당신이 따옴표와 함께 변수 rfered했다

<!DOCTYPE html> 
<html> 
<head> 
    <link rel='stylesheet' href='style.css'/> 
    <script type= 'text/javascript' src='nameGenerator_JS.js'></script> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
</head> 
<body> 
    <button class = "nameCreationButton">Click Here to Generate Name</button> 
    <div class = "displayName"></div> 
</body> 
</html>

출처

2014-04-18 user3549609

은' ''인용 제거? –

또한 JavaScript 변수 및 jQuery 변수와 같은 것은 없습니다 ... –

HTML의 공백도 제거하십시오. 'Type = 'nameCreationButton'' –

두 변수 name를 선언 절대적으로 아무 소용이 없습니다. 당신은 한번 generator() 안에 한 번, 그리고 아주 좋은 생각이 아닌 지구본으로 한번하십시오.

대신 단추를 클릭하면 generator() 함수를 실행하는 것이 좋습니다. 이 함수는 name을 반환해야합니다.

이를 다시 작성하려면

function generator(){ 
    var firstName = ["John","Mike","Robert","Patrick"], 
     lastName = ["Smith","Johnson","Williams","Anderson"], 
     randomNumber1 = parseInt(Math.random() * firstName.length, 10), 
     randomNumber2 = parseInt(Math.random() * lastName.length, 10); 

    return firstName[randomNumber1] + " " + lastName[randomNumber2]; 
} 

$(function(){ 
    $(".nameCreationButton").click(function(){ 
     //var name = generator(); 
     $(".displayName").append(generator()); 
    }); 
});

demo

출처

2014-04-18 17:51:09

이것은 가장 좋은 답변입니다. :) 질문에 국한되지 않고 코드를 개선합니다. –

(*)는, 그것은 문자열

var name = "aslan"; 
console.log(name) //=> aslan 
console.log("name") //=> name

(*) 또한, 변수 이름이 내부에 선언 된 아웃 사이드 기능입니다

간주됩니다. 함수 내에서 선언 된 변수는 지역 변수, 으로 간주되므로 var 이름이 함수 외부에서 선언되지 않도록 append()를 사용합니다. 검사 : http://snook.ca/archives/javascript/global_variable

변경 코드 :

function generator(){ 

    var firstName = ["John","Mike","Robert","Patrick"]; 
    var lastName = ["Smith","Johnson","Williams","Anderson"]; 

    var randomNumber1 = parseInt(Math.random() * firstName.length); 
    var randomNumber2 = parseInt(Math.random() * lastName.length); 
    return firstName[randomNumber1] + " " + lastName[randomNumber2]; 
} 


$(document).ready(function(){ 
    $(".nameCreationButton").click(function(){ 
     $(".displayName").append(generator()); 
    }); 
});

출처

2014-04-18 17:45:32 sudhnk

당신은 환영합니다.:) –

'정의되지 않은 var 이름' –

당신은 append('name')에 단일 ' 따옴표를 제거해야합니다.

generatorfunction 안에 name 변수에 대한 var 선언을 제거해야합니다. generator 블록 ({...}) 안에있는 var name은 해당 블록 내에서만 변수를 볼 수있게합니다. 따라서 원래 코드에서 두 개의 서로 다른 범위를 갖는 name이라는 두 개의 다른 변수가 있습니다.

시도 :

function nameGenerator(){ 

    var firstName = ["John","Mike","Robert","Patrick"]; 
    var lastName = ["Smith","Johnson","Williams","Anderson"]; 

    var randomNumber1 = parseInt(Math.random() * firstName.length); 
    var randomNumber2 = parseInt(Math.random() * lastName.length); 
    return firstName[randomNumber1] + " " + lastName[randomNumber2]; 
} 


$(document).ready(function(){ 
$(".nameCreationButton").click(function(){ 
    var name = nameGenerator(); 
    $(".displayName").text(name); 
}); 
});

출처

2014-04-18 17:47:55

또는 생성기에서'return name'은 더 깨끗합니다. – Scott

@Scott 감사합니다! –

자바 스크립트 변수 범위 및 JQuery에서 사용

답변

관련 문제