Develop Reference

Modifying EJS tag onclick -- Adding an input to a form onclick

I've been self-teaching coding for the last 3 months or so and I have a couple of issues with a page I'm trying to make. I think my problems are a bit basic so I'm a little ashamed to ask. Any guidance would be very useful. Thank you!
I have a page that accepts recipes. Each recipe has a set number of instructions or ingredients.
The form that accepts the new recipe by default shows 3 fields to add instructions and 3 fields to add ingredients.
I'd like to implement a button that allows the user to add an extra ingredient or an extra step to the instructions.
This is what the New view file looks like in the instruction segment. It's pretty much the same for ingredients give or take a few things.
<div class="mb-3">
<label class="form-label" for="instructions" id="labelInstructions">instructions</label>
<% for(let i = 0; i<3; i++){ %>
<div class="input-group" id="instructionGroup">
<div class="input-group-prepend">
<span class="input-group-text">Step <%= i+1 %> </span>
</div>
<textarea class="form-control" aria-label=<%=`Instructions-Step-${i +1}`%> name=<%=`recipe[instructions][${i}][body]` %> id="instructions"></textarea>
</div>
<div class="valid-feedback">Looks good!</div>
<% } %>
I tried adding an onclick function to a
<button onclick="addInstruction()">+</button>
I required the file on the template and the file attempted to add the appropriate amount of divs and modify the classes and innertext, etc, etc.
But I got stuck here:
function addInstruction() {
console.log('clicked')
const label = document.getElementById('labelInstructions')
const tempDiv = document.createElement('div')
label.insertAdjacentElement("afterend", tempDiv)
}
In the console it shows that it is being clicked but it doesn't add the div I created. I know the rest of the logic isn't there yet I just wanted to see if I could see the div first, but I can't see anything.
Then I started thinking it would be easier to just add one to the loop limit. But that loop is written inside an EJS tag, I was wondering if there was a way to modify that through an onclick event. Or if there's just an entirely better way of doing this that I'm missing.
I'm very new to this, any help is appreciated. Thank you!

I think you are asking how to add some sort of div inside the DOM when a user clicks a button. To do this I would just use the .appendChild() method and append the div as a child element of the form for example document.querySelector("form").appendChild(<Div Variable>)

Remove plain HTML text withing a div

How can I remove the 'Currently' in the HTML withouting deleting other texts
<div class="group if-description-margin">
Currently: <--- Remove this text
images/header-dots.png
<input type="checkbox" name="profile_picture-clear" id="profile_picture-clear_id">
<input type="file" name="profile_picture" accept="image/*" id="id_profile_picture">
<p> But don't remove this </p>
<label for="id_profile_picture">Profile Picture</label>
</div>

You can use a regexp and the innerHTML:
const textContainer = document.querySelector('.group')
const btn = document.getElementById('remove')
const removeText = (el, regexp) => {
const oldHTML = el.innerHTML
const newHTML = oldHTML.replace(regexp, '')
return newHTML
}
const regexp = /Currently:/g
btn.addEventListener('click', function() {
textContainer.innerHTML = removeText(textContainer, regexp)
})
<div class="group if-description-margin">
Currently: <!-- Remove this text -->
images/header-dots.png
<input type="checkbox" name="profile_picture-clear" id="profile_picture-clear_id">
<input type="file" name="profile_picture" accept="image/*" id="id_profile_picture">
<p> But don't remove this </p>
<label for="id_profile_picture">Profile Picture</label>
</div>
<button id="remove">REMOVE THE TEXT</button>

You can use the DOM to your advantage. If you have a reference to the parent Div, you can use the childNodes property (https://www.w3schools.com/jsref/prop_node_childNodes.asp) of it. It only returns the HTML elements, and not the text nodes. You could write a pretty simple function that loops through the childNodes to rebuild the innerHTML and by happy side-effect, it would leave out the text nodes.
If you want specific text nodes removed, you can use the children property (https://www.w3schools.com/jsref/prop_element_children.asp) which includes both the text nodes and the html elements. Then you still loop through the children and just add logic to decide if you add it back in to the innerHTML.
Edit: Adding a link to my test page...
https://highdex.net/StackOverflow/DOMHelper.htm
Edit 2: further explanation
I ended up using only the childNodes collection. And instead of clearing and rebuilding, I just removed text nodes (or text nodes that match the criteria). The second function has a lot more variable assignment than necessary, but I broke it up during debugging so I could more easily see values being used. It should be cleaned up, but won't hurt your understanding of it. One last thing to mention is that decrementing the counter in the for loop MUST be done that way. It avoids trying to access an index that might no longer exist if you try removing things from the beginning first.

Create a single search box which searches two different sites using javascript

I've made multiple search boxes that search external dictionary sites. Due to the site search syntax, I've had to use JavaScript to construct a url from the text box input. This code works perfectly fine:
function prepare_link_glosbe() {
var url_param_gl = document.getElementById('url_param_gl');
var target_link_gl = document.getElementById('target_link_gl');
if ( ! url_param_gl.value ) {
return false;
}
target_link_gl.href = "https://nb.glosbe.com/en/nb"
target_link_gl.href = target_link_gl.href + '/' + encodeURI(url_param_gl.value);
window.open(target_link_gl.href, '_blank')
}
function prepare_link_dict() {
var url_param_dict = document.getElementById('url_param_dict');
var target_link_dict = document.getElementById('target_link_dict');
if ( ! url_param_dict.value ) {
return false;
}
target_link_dict.href = "https://www.dict.com/engelsk-norsk"
target_link_dict.href = target_link_dict.href + '/' + encodeURI(url_param_dict.value);
window.open(target_link_dict.href, '_blank')
}
<!--Search Glosbe.com-->
<div style="border:0px solid black;padding:8px;width:60em;">
<table border="0" cellpadding="2">
<tr><td>
<input type="text" onfocus="this.value=''" value="Search glosbe.com" name="url_param_gl" id="url_param_gl" size="40"/>
<input type="button" onclick="prepare_link_glosbe()" value="Glosbe (en-no)" />
<a href="https://nb.glosbe.com/en/nb" id="target_link_gl" target="_blank" ></a>
</td></tr></table></div>
<!--Search Dict.com-->
<div style="border:0px solid black;padding:8px;width:60em;">
<table border="0" cellpadding="2">
<tr><td>
<input type="text" onfocus="this.value=''" value="Search dict.com" name="url_param_dict" id="url_param_dict" size="40"/>
<input type="button" onclick="prepare_link_dict()" value="Dict (en-no)" />
<a href="https://www.dict.com/engelsk-norsk" id="target_link_dict" target="_blank" ></a>
</td></tr></table></div>
However, I wish to search both sites using a single input box. I've tried different approaches, including addEventListener, but I'm not fluent enough in either HTML or JavaScript to achieve it. Can anyone point me in the right direction?

First of all, some things that will make your life easier in the long run:
You don't need this.value='', just use the placeholder attribute - it's well supported.
Don't use <table> to create a layout.
Don't use attributes to assign JS event handlers. (so no onclick=)
And now, how to use just one text field for both websites - just remove the second field and move the button somewhere else. Here's an example:
// This is our search input field.
const searchValue = document.getElementById('search_value');
// Here I'm looking for all search buttons and iterating over them
// with for ... of, querySelectorAll accepts valid CSS selectors.
for (let button of document.querySelectorAll('.search_button')) {
// Getting the data-url attribute value from the button.
const url = button.dataset.url;
// Adding a click event handler, instead of relying on onclick=''
button.addEventListener('click', function () {
// Quick string replace...
const targetURL = button.dataset.url.replace('%s', encodeURI(searchValue.value));
// ...and here we open the new tab.
window.open(targetURL, '_blank');
});
}
<div>
<input type="text" placeholder="Search..." id="search_value" />
<button class="search_button" data-url="https://nb.glosbe.com/en/nb/%s">Glosbe (en-no)</button>
<button class="search_button" data-url="https://www.dict.com/engelsk-norsk/%s">Dict (en-no)</button>
</div>
Here's the explanation:
I'm using the HTML data-* attributes (accessible in JS via element.dataset.*) to store the URL, %s is being used as a placeholder for the search value and will be later replaced with the .replace function.
Instead of manually assigning IDs to buttons I've declared a class - this allows you to extend the application infinitely.
I've merged the input fields into just one and read its value in the button event handler.
I've replaced your this.value='' hack with a proper placeholder.
I've removed the table layout, if you wish to add a nicer layout or styling I would suggest to learn more about CSS - also: don't use HTML attributes to style elements (except for class and style). Avoid using ID selectors in CSS as well (it's fine in JS, but in CSS it can cause issues when it comes to importance). Also, you should avoid the style attribute anyway - it will take precedence over most CSS rules except for the rules with !important and causes code duplication.

vue.js binding value from dynamically generated input

I have the below code for generating comments (cutted down for simplicity sake):
<div v-for="(g, gi) in submission.goals" :key="gi">
<div>
<p >Goal #{{gi+1}}</p>
<div>{{g.text}}</div>
</div>
<div>
<p>Comments:</p>
<div><span class="uk-text-small uk-text-muted"><i>no comments</i></span></div>
<hr>
<div>
<textarea class="comment-input" placeholder="type your comment here"></textarea>
</div>
</div>
</div>
and my method look like this:
submitComment(gid,uid,phase,e)
{
e.preventDefault();
//var comment -> get the value of the closes textaraea here
console.log(gid, uid, phase, comment);
//here I will make the ajax call to the API
}
As you can see the whole thing is generated in a v-for loop generating divs according to the size of the submission.goals array returned by the API.
My question is how can I get the value from the textarea input closest to the anchor that is calling the submit function.
Obviously I can't have a separate data object for each comment area since I do not have a control over the size of submission.goals array. And if I use v-model="comment" on each input, whatever user types in will be automatically propagated to each and every textarea.
I know how to handle this with jQuery, but with Vue.js I am still in the early learning stages.

If you mark the text area as a ref, you could have a list of textarea elements. With the index number of the v-for items (gi in your case), you can get the [gi] element of the refs list and submit its value.
<textarea ref="comment" class="comment-input" placeholder="type your comment here"></textarea>
submitComment(gid,uid,phase,e, gi)
{
e.preventDefault();
var comment = this.$refs.comment[gi].value;
console.log(gid, uid, phase, comment);
//here I will make the ajax call to the API
}

Try change submission.goals to computed submissionGoals and create this computed with the code above:
submissionGoals(){
return this.submission.goals.map(goal => ({...goal, comment: ''}));
}
Use v-model="g.comment" on textarea.
Now change submitComment(g.id, g.user_id, g.phase, $event) to submitComment(g, $event) like Alexander Yakushev sayed.

What is innerHTML on input elements?

I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties and attributes and couldn't figure out what I was doing wrong.
The activeElement selector works fine, it is selecting the correct element.
Edit: I just found that it's the value property. So I'd like to change what I'm asking. Why doesn't changing innerHTML work on input elements? Why do they have that property if I can't do anything with it?

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
value applies only to objects that have the value attribute (normally, form controls).
innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls).
They are not equivalent or replaceable. Depends on what you are trying to achieve

First understand where to use what.
<input type="text" value="23" id="age">
Here now
var ageElem=document.getElementById('age');
So on this ageElem you can have that many things what that element contains.So you can use its value,type etc attributes. But cannot use innerHTML because we don't write anything between input tag
<button id='ageButton'>Display Age</button>
So here Display Age is the innerHTML content as it is written inside HTML tag button.

Using innerHTML on an input tag would just result in:
<input name="button" value="Click" ... > InnerHTML Goes Here </input>
But because an input tag doesn't need a closing tag it'll get reset to:
<input name="button" value="Click" ... />
So it's likely your browsers is applying the changes and immediatly resetting it.

do you mean something like this:
$('.activeElement').val('Some text');

<input id="input" type="number">
document.getElementById("input").addEventListener("change", GetData);
function GetData () {
var data = document.getElementById("input").value;
console.log(data);
function ModifyData () {
document.getElementById("input").value = data + "69";
};
ModifyData();
};
My comments: Here input field works as an input and as a display by changing .value

Each HTML element has an innerHTML property that defines both the HTML
code and the text that occurs between that element's opening and
closing tag. By changing an element's innerHTML after some user
interaction, you can make much more interactive pages.
JScript
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
HTML
<p>Welcome to Stack OverFlow <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
In the above example b tag is the innerhtml and dude is its value so to change those values we have written a function in JScript

innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
For instance:
document.getElementById("example").innerHTML = "my string";
This example uses the method to "find" an HTML element (with id="example") and changes the element content (innerHTML) to "my string":
HTML
Change
Javascript
function change(){
document.getElementById(“example”).innerHTML = “Hello, World!”
}
After you clicked the button, Hello, World! will appear because the innerHTML insert the value (in this case, Hello, World!) into between the opening tag and closing tag with an id “example”.
So, if you inspect the element after clicking the button, you will see the following code :
<div id=”example”>Hello, World!</div>
That’s all

innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
Example.
HTML
Change
Javascript
function FunctionName(){
document.getElementById(“example”).innerHTML = “Hello, Kennedy!”
}
On button Click, Hello, Kennedy! will appear because the innerHTML insert the value (in this case, Hello, Kennedy!) into between the opening tag and closing tag with an id “example”.
So, on inspecting the element after clicking the button, you will notice the following code :
<div id=”example”>Hello, Kennedy!</div>

Use
document.querySelector('input').defaultValue = "sometext"
Using innerHTML does not work on input elements and also textContent

var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;
<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>
Instaed of using InnerHTML use Value for input types