Javascript Variável do js esta com um valor undefined

Samuel.ms2112 · 17 de janeiro de 2020

ola. Tudo bem?

Então com o seguinte, estou com um projeto pessoal, que verifica se um arquivo(img .png) existem em um determinado diretório, se existe ele deveria me retornar o link desse arquivo para que eu possa abir o mesmo, porém quando vou executar o comando ele me da que a variável esta undefined;

a variável de erro é a src; teoricamente o algorítimo deveria fazer o seguinte: ao apertar no botão ele automaticamente deve abrir um modal com uma imagem, no value do botão existe o nome da pasta referente a imagem. então no js eu pego esse value, e passo junto com a variável src(vazia) em uma função onde ela vai verificar se a pasta com as imagens existe, se sim, ela deveria salvar na variável src o link da primeira imagem, porém nao faz isso. já tentei com retorn também e não deu em nada

na imagem a baixo eu coloco um alart para me mostra qual o valor dela;

segue o html/js referente somente ao erro;

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Botão para acionar modal -->
<button type="button" name="manual" value="WIFI" class="btn btn-primary" data-toggle="modal" onclick="iniciar(this.value);" data-target="#modalExemplo">
  Abrir modal de demonstração
</button>

<!-- Modal -->
<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img id="image" class="img-fluid">
        <input type="hidden" value="0" id="QManual">
        <input type="hidden" value="0" id="Qimg">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="anterior();"><<</button>        
        <button type="button" class="btn btn-primary" onclick="proxima();">>></button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

function iniciar(manual) {
    var src;
    verificarI(manual, src);
    document.getElementById('image').src = src;
    alert(src);
    document.getElementById('QManual').value = manual;
    document.getElementById("Qimg").value = 1;
}

function verificarI(manual, src){
    var caminho = new Image();
	caminho.src = "img/"+manual+"/"+1+".png";
	caminho.onload = function() {
		src = "img/"+manual+"/"+1+".png";
	}
	caminho.onerror = function() {
		alert("Manual Não Localizado: "+manual+".");
	}
}

Luís Roberto C. da Silva · 17 de janeiro de 2020

Ao chamar a função verificarI(manual, src); você está enviando os atributos vazios. Tente chamar essa função no final da iniciar(manual);

Samuel.ms2112 · 17 de janeiro de 2020

@Luís Roberto C. da Silva nao tem como eu chamar ela no final, se você reparar no codigo, eu preciso dela para poder realizar as demais ações

Luís Roberto C. da Silva · 17 de janeiro de 2020

function iniciar(manual) {
    var src;
    verificarI(manual, src);
    document.getElementById('image').src = src;
    alert(src);
    document.getElementById('QManual').value = manual;
    document.getElementById("Qimg").value = 1;
}

Tem certeza? observe que você instanciou a variável src e imediatamente chamou a função verificarI(manual, src) com a variável vazia. Além disso, na terceira linha da função você atribuiu ao elemento 'image' o valor src, que está vazio e depois chama um alert() para exibir o src, que está vazio. Como quer que algo apareça?

Samuel.ms2112 · 17 de janeiro de 2020

@Luís Roberto C. da Silva agora se você olhar a outra função

function verificarI(manual, src){
    var caminho = new Image();
	caminho.src = "img/"+manual+"/"+1+".png";
	caminho.onload = function() {
		src = "img/"+manual+"/"+1+".png";
	}
	caminho.onerror = function() {
		alert("Manual Não Localizado: "+manual+".");
	}
}

o valor que esta da variável src, teoricamente deveria esta mudando, pois la ela recebe o endereço :

"img/"+manual+"/"+1+".png";

ou seja, não esta mais vazia;

pelo menos em outras linhagens de programação (como C por exemplo) isso é possível.

porém mesmo colocando um return na função e fazendo o src receber esse return a variável continua vazia

Luís Roberto C. da Silva · 17 de janeiro de 2020

@Samuel.ms2112 só que a variável src da função iniciar(manual) é diferente da variável src da função verificarI(manual, src). Só porque têm o mesmo nome não significa serem a mesma variável. Isso é programação básica. Para a variável receber um valor ele precisa está na mesma função, em outra função já não é a mesma variável.

adicionado 2 minutos depois

Em relação a linguagem C, isso só é possível utilizando ponteiros. Javascript não tem ponteiros.

adicionado 3 minutos depois

Pra colocar um return na segunda função terá que atribuir a variável a função, tipo:

var src = myFunction();

Samuel.ms2112 · 17 de janeiro de 2020

@Luís Roberto C. da Silva sim elas tem o mesmo nome, porém quando eu chamo a função verificarI(manual, src) eu passo dois parâmetros, o primeiro é o value que eu pego no html, e o segundo a variável que eu quero que receba a alteração.

mas ok, vou criar essa variável de forma global, realmente eu estava pensando em ponteiros ao fazer isso.

adicionado 20 minutos depois

@Luís Roberto C. da Silva mesmo colocando o return nao funcionou entao acabei fazendo de outra forma

function verificarI(manual){
    var caminho = new Image();
    var c;
	caminho.src = "img/"+manual+"/"+1+".png";
	caminho.onload = function() {
		document.getElementById('image').src = "img/"+manual+"/"+1+".png";
	}
	caminho.onerror = function() {
		alert("Manual Não Localizado: "+manual+".");
	}
    
}