Is that right? The question and doubt is in the commentary of the code

Asked

Viewed 199 times

-4

<html>
<head>
    <title>Curso Java Script</title>


/* Exercicio: Seguindo o resultado do exercício anterior adicione um input em tela e um botão como a seguir:
<input type="text" name="nome">
<button onClick="adicionar()">Adicionar</button>
Ao clicar no botão, a função adicionar() deve ser disparada adicionando um novo item a lista de
nomes baseado no nome preenchido no input e renderizando o novo item em tela juntos aos
demais itens anteriores. Além disso, o conteúdo do input deve ser apagado após o clique.


ACHO QUE ESTA FALTANDO A PARTE DE QUANDO CLICA NO BOTÃO PARA ADICIONAR NOME FICAR UM DEBAIXO DO OUTRO NA PAGINA, POIS O CONSOLE LOG DO CÓDIGO USEI SÓ PARA TESTE PARA VER SE ESTAVA CADASTRANDO CERTO, MAIS NÃO SEI SE ERA ISSO MESMO QUE ERA PARA FAZER.
*/


</head>
<body>
    <div id="app">
        <input type="text" id = "name" name="nome" onclick = "this.value = ''"/>
        <button class='li' id = 'li' onclick="adicionar()">Adicionar</button>
        <span id="texto"></span>
    </div>
    <script>
    var btnElement = document.querySelector('li');

    function adicionar(){

        var nome = document.getElementById('name').value;

        document.getElementById('texto').innerHTML = nome;
        console.log(nome);
        nome ='';
        document.getElementById('name').value = "";
    }
</script>
</body>
</html>
javascript html

  • Could you give me more details of what you’re trying to do.

  • Following the result of the previous exercise add a screen input and a button as follows: <input type="text" name="name"> <button onClick="add()">Add</button> When clicking the button, the add() function should be triggered by adding a new item to the list of & #Xa;names based on the name entered in the input and rendering the new item on screen together with the previous & #Xa;. In addition, the content of the input must be deleted after the click.

  • Only the part of leaving the names under each other in HTML is missing

  • The console.log there I only used help to see if it was registering right, but I will delete it, after all.

  • It is deleting from the HTML page.

  • 1

    "Following the result of the previous exercise"? What previous exercise? Is it relevant to know this exercise? Regarding the continuation of the explanation, the procedure of the site is to edit the question and put this information in the question itself because the answers presented are given according to the content of the question.

  • From the following array: var names = ["Diego", "Gabriel", "Lucas"]; Fill a list (<ul>) in the HTML with the items as follows: Diego Gabriel Lucas

  • Ask the question so I can give you an answer.

  • Every time you click the button already with the name typed, put the next name on the page it erases this appearing only on the console, or would that be it? But I don’t think so.

  • The question is this Top I’ll paste here too: From the following array: var names = ["Diego", "Gabriel", "Lucas"]; Fill a list (<ul>) in the HTML with the items as follows: Diego Gabriel Lucas

  • Reiterating: Edith your question by pressing the button edit located just below your question. I will not submit an answer based on the information of the comments. The comments serve only to clarify details. The norm of the site is that the scope of the answers should focus on the content presented in the questions and not the comments.

  • I will not give you the solution of the exercise for practical reasons, it was created for you to learn Javascript, in your code, when you type and click the button, it changes the content from within the <SPAN>, to work properly, before writing the name in SPAN innerHtml, you have to take the value of it, and concatenate with "<br>"+name this is the logic, now just codify....

Show 7 more comments

1 answer

0

I believe this is the solution you are looking for. I put with log for better understanding. If all the text to appear on the screen is just start the variable i of for with 0 (i=0)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">

    <input type="text" id = "name" name="nome" oninput="adicionar()"/>
    <button class='li' id = 'li' onclick="adicionar()">Adicionar</button>
    <span id="texto"></span>

</div>
<script type="text/javascript">
	var btnElement = document.querySelector('li'); 
	function adicionar(){ 
		var nome = document.getElementById('name').value; 
		var nomeP = nome.split(" ");
		console.log(nomeP);
		var palavra = "";

		if (nomeP.length>1) {
			for(var i=1;i<nomeP.length;i++)
				palavra =  palavra.concat(nomeP[i]+' ');
		}
		document.getElementById('texto').innerHTML = palavra;

		console.log(nome); nome =''; 
		//document.getElementById('name').value = ""; 
	}
</script>

</body>
</html>

  • Good night, all right? So that’s not really it, I wanted every name I was adding to be appearing under each other on the HTM page, that’s all I need to be able to finish the exercise, the console.log I just left there to see if it was storing everything ok but I’ll take it off later. I’ll send the exercise question down. But thanks already, hugs.

  • Following the result of the previous exercise add a screen input and a button as follows: <input type="text" name="name"> <button onClick="add()">Add</button> When clicking the button, the add() function should be triggered by adding a new item to the list of & #Xa;names based on the name entered in the input and rendering the new item on screen together with the previous & #Xa;. In addition, the content of the input must be deleted after the click.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.