We Keep Coding

Reset before adding element and class

I've been trying to reset after inserting an element with a class with no success. Tried also innerHTML="" but it is not working.
Maybe because I'm using insertAdjacentHTML(). - ? I couldn't find a remove method before inserting.
let small = document.querySelector("small")
let img_1 = document.querySelector('[name="img_1"]')
//Image fields validation
if (img_1.value =="") {
img_1.classList.add('is-invalid_create')
small = '<small class="text-danger__Create">Campo imagen 1 no puede estar vacío</small>'
img_1.insertAdjacentHTML("afterend", small);
} else {
img_1.classList.add('is-valid_create')
img_1.classList.remove('is-invalid_create')
}
I'm trying to build a validation with an error message if fields are . I used insertAdjacentHTML because innerHTML was not showing the text.
fiddle : https://jsfiddle.net/gzsudqvm/
I tried to do a simpler approach like:
function setErrorFor(input, message) {
input.innerHTML = ""
input.classList.add('is-invalid_create')
input.innerHTML = "<small class='danger'>"+message+"</small>"
}
But the message is not rendering, and there are no errors.

It's hard to tell without seeing more of your code - without understanding just how/what you are trying to reset.
tried also innerHTML=""
For which element? If it was something like img_1.innerHTML="", then your small gets left behind because you added it outside img_1 . (If that's intentional/necessary then you could try something like el.parentElement.removeChild(el) to remove the left-over elements separately.)
used insertAdjacentHTML because innerHTML was not showing the text
Does the debugger show any errors? When you inspect the outer element, has it not been added to html at all, or is the text just not rendering?
EDIT: now that I can see the fiddle, I realize the field you're trying to reset is an input type, so you can't change innerHTML - you have to work with value and placeholder and maybe even defaultValue when setting/resetting.
I would suggest just resetting value and showing the message by adding a class with [::after][1] css, but you could also show it by setting a new placeholder or even value [I don't thing setting the error message as value is a good idea at all though]. You can define the placeholder style in css as ::placeholder; but personally, I much prefer the ::after approach.

how i can visible textarea box using javascript

I'm making automation script in python using selenium so i want to visible textarea box because i want to put it into some arguments and i'm using this code:
element = driver.find_element_by_id('g-recaptcha-response')
driver.execute_script("arguments[0].style.display = '';", element)
driver.execute_script("arguments[0].style.margin = '100px 200px';", element)
but above code is not working for me as you can see here:
Could you please tell me how I can show textarea box? Link to the page.

arguments[0].style.display = 'block';
arguments[0].parentNode.parentNode.style.display = "block";
The problem is that setting style.display to an empty string is interpreted as setting the display to "none" and that makes the element invisible. The textarea also sits in a parent which sits in a parent with the styling "display: none" so to solve that just go to the parent of the parent and set its display to "block".

Javascript: How to check whether an element is "displayed" on the screen?

Step 1:
When I change the value of the display property of an element using JavaScript by something like:
document.getElementById("myDiv").style.display = "none";
it changes what I see in the browser, but it does not change anything in the server side HTML script.
Step 2 - Problem here:
The problem is that after the above step, I later have to check if #myDiv is displayed on the screen. If it is, I do something. So I need to use a conditional expression like:
if (document.getElementById("myDiv").style.display == "none") {
//do something here
}
But problematically this expression never evaluates to true, because step one did not change anything on the server side HTML.
So I need a way here to check in JS whether an element is displayed on the screen? How can I do that?
NOTE:- Don't suggest JQuery. I can't use it.

What you have should be working. Yes, running
[...].style.display = "none";
does not change the server-stored HTML; however, when you check for that same property,
([...].style.display == "none")
you are checking the inline styles, which are set by the first line.
For example, running
document.getElementById("aDiv").style.display = "none";
Will set the inline style property of #aDiv:
<div id="aDiv" style="display: none;">
JSFiddle

Use the visibility property.
visibility: visible|hidden|collapse|initial|inherit;
document.getElementById("myDiv").style.visibility = "hidden";

How to hide a *single* MVC/Kendo tabstrip tab?

How do I hide a single tab on a MVC/Kendo UI tabstrip?
I want to hide a tab based on a condition. My jQuery code goes like this:
//authUser is a hidden input whose value is set in the controller and passed into the view
if ($('#authUser').val() == 'False') //hide the last tab
{
$($("#tabstrip").data("kendoTabStrip").items()[6]).attr("style", "display:none");
}
When I run the code I get the following error on the line of code that's executed if authUser is False:
JavaScript runtime error: Unable to get property 'items' of undefined or null reference
Ideas?

The fact that 'items' is undefined implies that you never appropriately selected the tabstrip in the first place. Either your CSS selector is wrong (are you sure you named it tabstrip?) or you did not follow the Kendo method names appropriately.
Here are two ways I found to hide the last tab:
Hiding the last tabstrip element
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
//Find the last tab item's index from the items list
var lastIndex = tabStrip.items().length - 1;
//Use jQuery's hide method on the element
$(tabStrip.items()[lastIndex]).hide();
Using Kendo's tabstrip remove method
I believe the following is more appropriate. Why not use the tabstrip's remove method and completely remove it from the DOM since the user should not have access anyway?
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.remove("li:last");

I'm just stupid....
I looked some more at the code and I was leaving out the kendoTabStrip() word (bolded) from
$($("#tabstrip").kendoTabstrip().data("kendoTabStrip").items()[6]).attr("style","display:none")
i.e. Instead of (properly) having:
$($("#tabstrip").kendoTabStrip().data("kendoTabStrip").items()[6]).attr("style","display:none")
I had:
$($("#tabstrip").data("kendoTabStrip").items()[6]).attr("style","display:none")
Drew, thanks for your effort. Sometimes I just have to beat my head on a wall until I see what I've done.

Read more opens 1st one all the time

I've a page with about 10 short articles.
Each of them as a "Read More" button which when pressed displays hidden text
The issues I have at the moment is when I press the "Read More" on any of the 10 button it shows the 1st articles hidden content and not the selected one.
I think I need to set a unique ID to each article.. and the read more button be linked to it.. But I don't know how to set it.
I looked at this but couldn't get it working how to give a div tag a unique id using javascript
var WidgetContentHideDisplay = {
init:function() {
if ($('#content-display-hide').size() == 0) return;
$('.triggerable').click(function(e){
var element_id = $(this).attr('rel');
var element = $('#'+element_id);
element.toggle();
if (element.is(':visible')) {
$('.readmore').hide();
} else {
$('.readmore').show();
}
return false;
});
}
}
var div = documentElemnt("div");
div.id = "div_" + new Date().gettime().toString;
$(document).ready(function(){ WidgetContentHideDisplay.init(); });
OP Edit: Sorry, the original code wasn't in caps. I kept getting errors when trying to post, so I copied the code into Dreamweaver and it made it all caps for some reason.

Instead of selecting the element to toggle with an ID (i.e. $('#'+ELEMENT_ID)) you could setup a class for your item and use the class selection (e.g. $('.DETAILED-ARTICLE)') to select the child (or the brother, etc. depending how you built the HTML page).
In theory each ID should point to a single element but each class can be put to as many elements as you want.

If you're getting errors, read the errors and see what they are. Off of a quick read of your code, here are a couple things I noticed that will probably cause issues:
"documentElemnt" is misspelled, which will render it useless. Also, documentElement is a read-only property, not a function like you're using it.
toString is a function, not a property, without the parentheses (.toString()) it isn't going to function like you want it to.
Run the code, look at the errors in the console, and fix them. That's where you start.