We Keep Coding

Prevent paragraph from adding new line (JAVASCRIPT, HTML)

I have a program I'm writing that will display countries and sub-county via an array of information. I've decided to include a part where instead of displaying in a text area, I just want it to display via paragraph output.
However, if the user clicks the button again, it will keep copying and pasting the output. I want to prevent this in case the user does this action
[Current Result after button is pressed multiple times ][1] https://i.stack.imgur.com/enZVW.png
It displays the result multiple times if the button is clicked again.
[How I want it to look like after pressing the button multiple times][2] https://i.stack.imgur.com/dXqYE.png
HTML
<input type="input" id="city"><br><br>
<button id="button2"> <!-- Giving button an ID to be called out in our init function and add an eventlistener -->
Show country/subcountry</button><br><br><br>
<!-- <textarea readonly id="countryOut" style="overflow-y:scroll;
resize: none; margin-left: 2.7em; " ></textarea><br><br> -->
<p id = "countryOut"></p><br><br>
JAVASCRIPT
// display += `${sub}, ${co}\n \n`; // display subcountry, and country with new lines included for spacing
p2.innerHTML += `${sub}, ${co}\n \n`;
}
}
}
function init() {
var button = document.getElementById("button1"); // When country is entered, cities will display
button.addEventListener("click", getCountrySub); // when click event/action is performed, the function of getCountry will execute
var button2 = document.getElementById("button2"); // when city is entered, the region, country, sub country, etc. will display
button2.addEventListener("click", getCities); // when click event/action is performed, the function of getCities will execute
}```

+= sign is making duplicated texts.
Fix this to = will work what you intended.
// AS-IS
p2.innerHTML += `${sub}, ${co}`
// TO-BE
p2.innerHTML = `${sub}, ${co}`

Feels like the code is incomplete, assuming that this is a loop that iterates through both lists
p2.innerHTML += `${sub}, ${co}`
Then I think you are missing a cleanup before you start the output, so before the loops start try this:
p2.innerHTML = ""; // trick is here, when button is clicked clear old results, then show new information
for (const co of countries) { // Please fix to your variable names
for (const sub of co.sub) {
p2.innerHTML += `${sub}, ${co}`;
}
}

Count multiple div class in same page

I am trying to make a correct and incorrect question counter that shows groups of 4.
If I click on the first correct answer the counter works correctly and increases as I click, but it does not work with the second correct answer. The same happens with the wrong answers
This is the codes that I use, anyone could help me? Thx
HTML CODE:
¿Which of the following operations results in 8?
<input class="solucioncorrecta" value="6+2">
<input class="solucioncorrecta" value="7+1">
<input class="solucionincorrecta" value="1+1">
<input class="solucionincorrecta" value="2+2">
And the JS CODE:
<!-- CONTADOR FALLOS TEST -->
<script type="text/javascript">
var root = document.querySelector('.solucionincorrecta');
root.onclick = function() {
var elem = document.getElementById('contadorfallos');
elem.innerHTML = +elem.innerText + 1;
};
</script>
<!-- CONTADOR FALLOS TEST -->
<!-- CONTADOR ACIERTOS TEST -->
<script type="text/javascript">
var root = document.querySelector('.solucioncorrecta');
root.onclick = function() {
var elem = document.getElementById('contadoraciertos');
elem.innerHTML = +elem.innerText + 1;
};
</script>

The issue is that you are using document.querySelector() and not document.querySelectorAll()
document.querySelector() Returns the first match
document.querySelectorAll() Returns all matches
As a result, you are only setting an onclick property on the first .correcta and .incorrecta elements, not all of them.
To set this on all of them, you need to do two things:
You need use document.querySelectorAll() instead of document.querySelector(). This returns a list (specifically, a NodeList) of matching elements.
Loop over the items in your list, and attach onclick handlers to each of them. There are many ways to loop over a NodeList, listed here.
Here is an example:
// get all incorrect elements
var incorrectElements = document.querySelectorAll('.incorrecta');
// loop over each elements
for (var element of incorrectElements) {
// add an onclick
element.onclick = incorrectClickHandler
}
// this is the function being called by onclick
function incorrectClickHandler() {
score.innerText = parseInt(score.innerText) - 1;
}

It would be better if you upload your full codes. But anyway I write you some notes that probably answer your question.
-dont use the same name (root) for your .correcta and .incorrecta
-in your second <script>, you didnt defined button as an object . So browser cant understand it.

Some problems getting a button value in javascript

I'm not sure I'm using this properly, but I need some help. I want to make a calculator, and I don't want to repeat code in html like onclick="insert(value)" so I wrote that code that would add an eventlistener on every button but I'm not sure how should I get the value of the button. At the moment text.value is [object MouseEvent]. I think I need something like btn.value but this doesn't work. Any ideas?
const btns = document.querySelectorAll(".button");
for(const btn of btns){
btn.addEventListener("click", function insert(value) {
text.value = text.value + value;
})
};

First of all. When you take a value from a html component you are taking a string.
You should use parseInt or parseFloat to convert these values in numbers.
the other thing is the html elements they are object in js with properties. You can use the function console.log and make you its best friend :) because although it is not a good practice all the time will help you a lot. When you log the element you can see how you can extract the value inside an Html Element. Normally all the HTMl Elements have a property called innerText and innerHtml with them you can extract the value inside. For the inputs type elements you have the property value to extract the value inside the element.
I couldn't understand what exactly are you trying to achieve but i supose is something like make the sum of entered values. One last and not more important thing is that if you are expecting some value in js and is undefined or null or isNaN you will not get the result you are expecting for. For that reason you should always ask first if what you are expecting for is what you are receiving.
<div class='container'>
<input type='text' id='display' />
<button>1</button>
<button>2</button>
<button>3</button>
</div>
const buttons = Array.from(document.getElementsByTagName('button'));
const display = document.getElementById('display');
for (const btn of buttons) {
btn.addEventListener("click", function(event) {
const buttonValue = parseInt(event.target.innerText);
const displayValue = display.value;
if (displayValue.length === 0) {
display.value = buttonValue;
return;
}
display.value = parseInt(displayValue) + buttonValue;
console.log(displayValue);
console.log(buttonValue);
})
};
Here the codepen if you want to see it :)

Everything I had to do was to add .target.value.
text.value = text.value + value.target.value;

I create dynamically some text area in a div. How can i get its names in javascript?

This is my code to create the textarea and it works fine, but I want to know how many textarea the user creates and their names.
function createBoxEquip() {
$codEquip = $('#equipamento').val();
$nomeEquip = $('#equipamento>option:selected').text();
$novadiv = "#div"+$codEquip;
if ( !$( $novadiv ).length ) {
$("#equip_tot").append('<div class="box"name=div'+$codEquip+'id=div'+$codEquip+'></div>')
$("#div"+$codEquip).append('<span class="titulo1" name='+$codEquip+' id='+$codEquip+'> - '+$nomeEquip+'</span><span name=texto'+$codEquip+' id=texto'+$codEquip+'><br> </span>');
$("#div"+$codEquip).append('<input type="button" name=apagar'+$codEquip+' id=apagar'+$codEquip+' value="Remover" onclick="deleteBoxEquip('+$codEquip+')"><span name=texto1'+$codEquip+' id=texto1'+$codEquip+'> <br></span>');
$("#div"+$codEquip).append('<input type="text" style="width: 20px;" name=contalinhas'+$codEquip+' id=contalinhas'+$codEquip+'><span name=texto2'+$codEquip+' id=texto2'+$codEquip+'><br></span>');*/
$("#div"+$codEquip).append('<textarea style="width: 150px;" rows=12 name=numerosserie'+$codEquip+' id=numerosserie'+$codEquip+' value="'+$codEquip+' - '+$nomeEquip+'"/><span name=texto3'+$codEquip+' id=texto3'+$codEquip+'> </span>');
}
}

As long as you can pre-determine what the names of the textarea will be, for example - I've written similar code that generated a bunch of <div> tags with unique ID's, each Id was numeric, so I'd auto-generate a bunch of tags like this:
<div id="div-0">Zero</div>
<div id="div-1">One</div>
<div id="div-2">Two</div>
Because I know in advance that each div id will have the prefix div- followed by a digit which begins at 0 and increments sequentially, I can iterate through each element in a loop, and know when I've reached an undefined element:
function loopElements() {
var divPrefix = "div-";
var divNo = 0;
// Loop through all div- tags:
//
while (true) {
// The .length property will return 0 if the element
// doesn't exist...
//
if ($("#" + divPrefix + divNo.toString()).length == 0)
// This div doesn't exist, bail!
//
break;
// do something with div
divNo++;
}
}
Something like this would work, it depends on the names/id's you're creating, and if you can somehow predetermine what they should be.
hope this helps.
EDIT:
Having read your question again I think the above solution may not be what you're looking for, if not I apologise.
There are some ambiguities with your question...exactly how are these names created? Does the user choose them? Are they generated programmatically?
You should post more code and explain in greater detail.

Javascript: How to get innerHTML of clicked button

Built a tip calculator but want to shorten the code by getting the innerHTML of the button that is being clicked.
Total Bill: <input id="bill" type="text">
<button type="button" onclick="tip15()">15</button>
<button type="button" onclick="tip18()">18</button>
<button type="button" onclick="tip20()">20</button>
<div id="tip">You owe...</div>
function tip15(){
var totalBill = document.getElementById("bill").value;
var totalTip = document.onclick.innerHTML
var tip = totalBill * 0.15;
document.getElementById("tip").innerHTML = "$" +tip
}
Problem with this method is that I have to write out three versions of the function to correspond with the tip amount. I want to create one function that grabs the innerHTML of the button being clicked and uses that value in the function. I want it to look something like this
function tip(){
var totalBill = document.getElementById("bill").value;
**var totalTip = GET INNERHTML OF CLICKED BUTTON**
var tip = totalBill * ("." + totalTip);
document.getElementById("tip").innerHTML = "$" +tip
}
That way I can run the same function on the different buttons.

Use HTML5 data attributes.
<button type="button" data-tip="15" onclick="getTip(this)">15</button>
The parameter this that you're passing to the function refers to the button that is being clicked. Then you get the value of the attribute like this:
function tip(button){
var tip= button.getAttribute("data-tip");
...
}
I leave the rest for you.

Change like this:Pass value to tip function.
<button id="15" type="button" onclick="tip(15)">15</button>
<button id="18" type="button" onclick="tip(18)">18</button>
<button id="20" type="button" onclick="tip(20)">20</button>
function tip(tip_value)
{
/*use here tip_value as you wish you can use if condition to check the value here*/
var totalBill = document.getElementById("bill").value;
var totalTip = tip_value;
var tip = totalBill * ("." + totalTip);
document.getElementById("tip").innerHTML = "$" +tip;
}

Pass this.innerHTML as an argument to your tip function.
So your tip function should look like this:
function tip(totalTip) {
var totalBill = document.getElementById("bill").value;
var tip = totalBill * ("." + totalTip);
document.getElementById("tip").innerHTML = "$" +tip
}
Therefore, if you have a button element that looks like this:
<button type="button" onclick="tip(this.innerHTML)">15</button>
The tip function will be called as tip(15).

I'll write up a quick solution, then explain why I did it that way.
PROPOSED SOLUTION
Part 1, the HTML
<div id="tip-wrapper">
<label for="bill">Total bill:</label>
<input name="bill" id="bill" type="text">
<br/>
<label for="tipratio">Tip ratio:</label>
<button name="tipratio" value="15" type="button">15%</button>
<button name="tipratio" value="18" type="button">18%</button>
<button name="tipratio" value="20" type="button">20%</button>
<div id="final-value">You owe...</div>
</div>
Part 2, the JavaScript
var parent = document.getElementById('tip-wrapper'),
buttons = parent.getElementsByTagName('button'),
max = buttons.length,
i;
// function that handles stuff
function calculate (e) {
var bill = document.getElementById('bill'),
tipRatio = e.target.value;
document.getElementById('final-value').textContent = bill.value * (1+tipRatio/100);
}
// append event listeners to each button
for(i = 0; i < max; i++) {
buttons[i].addEventListener('click', calculate, true);
}
EXPLANATIONS
About the HTML, not "much" has changed. The only thing being I'm using something that is a little more standards compliant.
I've added a wrapper element, this is just to isolate some DOM traversal instead of going through the whole document object to do your lookups (this will speed up your script).
Your buttons use "value" attribute, which is best. Since you can display button text one way, but use a proper value (see I added % characters).
Other than that, I mostly added proper identifiers and labels.
The JavaScript, this is where i'll go a little more in detail, I'll go step by step:
The first thing you want to do in a script is set the variables you'll need (and fetch the DOM elements you'll be using. This is what I've done on the first 4 lines of code.
Create a generic function that will handle your calculations and update your elements, no matter their numeric value. The feature I used here is adding a parameter (e) to your function, because EVENTS in javascript attach an EVENT OBJECT to your callback function (in this case calculate();). The EVENT OBJECT actually has a bunch of useful properties, of which I use:
target: this is the element that triggered the event (i.e. one of your buttons)
All we have to do is grab the target's value (e.target.value) and use that in the math that returns the final bill.
Using addEventListener. It's generally agreed on that you should keep your JavaScript outside of your HTML, so using the old event methods (onclick="") is discouraged. The addEventListener() method isn't too complicated, without going into detail it works as follows:
htmlObject.addEventListener('event type', 'callback function', 'bubbles true/false');
All I did was loop through all your buttons and append the event lsitener.
Closing notes
With this script, you can now add any "buttons" you want, the script will take them all into account and adapt accordingly. Just make sure to set their "value".
As I was writing this up a few people gave some quick answers. I can't comment yet (low reputation) so I'll leave my comments here.
Some of the proposed answers tell you to use innerHTML to fetch the tip value. This is wrong, you are using form fields and should use element.value that's what it is made for.
Some have even dared to say use the HTML5 data-* attributes. sure, you could. But why would you? HTML and the DOM already provide every necessary tool to accomplish your task WITHOUT the need to polute your HTML with unnecessary attributes. the value="" attribute is meant to be used in forms, it should be used over data-* attribute for field values.
As a general note innerHTML is meant to get HTML, not necessarily text or values. There are other methods to get the values you are seeking. In the case of form elements, it's element.value, in the case of most other HTML elements, it's element.textContent.
Hope these explanations help

function tip(o) {
var input = document.querySelector("input[id='bill']");
var total = input.value * o.innerHTML;
document.querySelector("#tip").innerHTML = "$" + total;
}
Total Bill: <input id="bill" type="text">
<button type="button" onclick="tip(this)">15</button>
<button type="button" onclick="tip(this)">18</button>
<button type="button" onclick="tip(this)">20</button>
<div id="tip">You owe...</div>