We Keep Coding

optimize and change style border vanilla js

I am creating a questionnaire and to be inserted in database. I'm doing Multiple Choices type. I am in a part where choosing a choices for a correct answer.
I wan't to change the border color of choices inputs if the value is equal to correct input and make other border color black if it's not equal to correct input,
but what happening to my code is, the border style of other choices that are not equal to the correct input stays greens, also my code is not so good i think there is a better way to make it much more clean and optimize.
This is what i have tried so far, but I'm not happy about it. I'm sure there's much better approach for this kind of code.
const inp = document.querySelectorAll("#choices input");
const inpCorrect = document.querySelector("#correct");
inp.forEach(x => {
x.addEventListener("click", function () {
inpCorrect.value = this.value;
})
x.addEventListener("keyup", function () {
inpCorrect.value = this.value;
this.value == inpCorrect.value ? this.style.border = '2px solid green' : this.style.border = '2px solid black';
})
})
#choices {
display: flex;
flex-direction: column;
width: 50%;
gap: 20px;
}
input {
outline: none;
}
<div id="choices">
<div><label for="correct">Choices A:</label>
<input type="text" id="choicesA"></div>
<div><label for="correct">Choices B:</label>
<input type="text" id="choicesB"></div>
<div><label for="correct">Choices C:</label>
<input type="text" id="choicesC"></div>
<div><label for="correct">Choices D:</label>
<input type="text" id="choicesD"></div>
</div>
<br>
<br>
<label for="correct">Correct Answer:</label>
<input type="text" id="correct">

It's not quite clear what you mean. Typically multiple choice questions are answered by selecting one of the given answers, not by typing an answer.
Here's a snippet for a multiple choice question, maybe that helps? It uses data-attributes to retain the values, event delegation for the handler and some css for the styling.
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.classList.contains(`choice`)) {
document.querySelectorAll(`.choice`).forEach(choice =>
choice.classList.remove(`correct`, `incorrect`));
const valueElem = evt.target.closest(`[data-value]`);
if (valueElem.dataset.value === document.querySelector(`#correct`).value) {
return valueElem.classList.add(`correct`);
}
return valueElem.classList.add(`incorrect`);
}
}
#choices {
display: flex;
flex-direction: column;
max-width: 25vw;
gap: 5;
}
[data-question]:before {
content: attr(data-question);
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 0.7rem;
width: 80vw;
}
.choice {
cursor: pointer;
border: 2px solid transparent;
padding: 3px;
}
.choice.correct {
border: 2px solid green;
}
.choice.incorrect {
border: 2px solid red;
}
<div id="choices" data-question="How many items do we find in a dozen?">
<div class="choice" data-value="144">A. 144</span></div>
<div class="choice" data-value="12">B. 12</span></div>
<div class="choice" data-value="24">C. 24</span></div>
<div class="choice" data-value="33">D. 33</span></div>
<input type="hidden" id="correct" value="12">
</div>
After your comments: loop the relevant input elements, compare them to the given correct value and colorize the border if the input value matches the correct value.
Play with this code #Stackblitz
document.addEventListener(`keyup`, handle);
function markCorrect(correctAnswer) {
const correct = value => value !== `` && value === correctAnswer;
document.querySelectorAll(`[data-answer]`)
.forEach(inp => correct(inp.value.trim()) ?
inp.classList.add(`correct`) :
inp.classList.remove(`correct`));
}
function handle(evt) {
if (evt.target.closest(`.choiceEdit`)) {
return markCorrect(document.querySelector(`#correctAnswer`).value);
}
}
.inp {
margin: 0.5rem auto;
}
.choice {
cursor: pointer;
border: 2px solid transparent;
padding: 3px;
}
input {
outline: none;
}
input.correct {
border: 2px solid green;
}
<div id="choices">
<div class="inp">
<input type="text" id="question" class="nocolor" value="How many is a dozen?"> The question
</div>
<div class="inp choiceEdit">
<input type="text" id="correctAnswer" value="12"> The correct answer
</div>
<div class="inp choiceEdit">
<input type="text" data-answer="a"> Answer A
</div>
<div class="inp choiceEdit">
<input type="text" data-answer="b"> Answer B
</div>
<div class="inp choiceEdit">
<input type="text" data-answer="c"> Answer C
</div>
<div class="inp choiceEdit">
<input type="text" data-answer="d"> Answer D
</div>
</div>

There are several issues with this code.
First: by assigning inpCorrect.value = this.value; you are ensuring that the value of the "correct" input will be changed every time any input receives a keyup or click event. If you are always changing the "correct" value to match the current value, then the current value will always seem correct. I am not really sure what you are going for with setting this, so I have removed those lines.
Second: It's not really a good idea to do assignment in a ternary (x = something ? foo : bar) conditional expression. Expressions like these should evaluate to a result, and not execute side effects.
Is this closer to the behavior you're looking for?
const inp = document.querySelectorAll("#choices input");
const inpCorrect = document.querySelector("#correct");
inp.forEach(x => {
x.addEventListener("keyup", function () {
if (this.value == inpCorrect.value) {
this.style.border = '2px solid green';
} else {
this.style.border = '2px solid black';
}
})
})
#choices {
display: flex;
flex-direction: column;
width: 50%;
gap: 20px;
}
input {
outline: none;
}
<div id="choices">
<div><label for="correct">Choices A:</label>
<input type="text" id="choicesA"></div>
<div><label for="correct">Choices B:</label>
<input type="text" id="choicesB"></div>
<div><label for="correct">Choices C:</label>
<input type="text" id="choicesC"></div>
<div><label for="correct">Choices D:</label>
<input type="text" id="choicesD"></div>
</div>
<br>
<br>
<label for="correct">Correct Answer:</label>
<input type="text" id="correct">

How to put Show / Hide Icon inside input field

I have an input field type password, I'm trying to put show / hide icon inside it. The problem is the icon, it is actually another input field and with html I can't put an input field inside another input field.
Can someone help me ? Maybe with css there can be a solution?
Sorry but I'm not very good with this, I appreciate any answer, thanks.
function showPassword() {
var x = document.getElementById("password_current");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
/*Toggle Password class*/
#togglePw { display: none; }
#togglePw + label:before { content: "\f06e"; }
#togglePw:checked + label:before { content: "\f070"; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<p class="">
<label class="t2" for="password_current"></label>
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/> <input type="checkbox" id="togglePw" onclick="showPassword()"/>
<label for="togglePw" class="fa"></label>
</p>

I would suggest using absolute positioning to align the icon.
Wrap the two inputs (password & checkbox) in a div.
<div id="password-input-toggle">
<input id="your-password-field"/>
<input type="checkbox" id="your-toggle-checkbox"/>
</div>
#password-input-toggle {
position: relative;
}
#your-toggle-checkbox {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}

Just use some CSS to nudge it left a little, not forgetting to allow for padding on the input control so text won't cover it.
function showPassword() {
var x = document.getElementById("password_current");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
/*Toggle Password class*/
#togglePw {
display: none;
}
#togglePw+label:before {
content: "\f06e";
}
#togglePw:checked+label:before {
content: "\f070";
}
/* add these: */
#togglePw+label {
position: relative;
left: -30px;
cursor: pointer;
}
#password_current {
padding-right: 30px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<p class="">
<label class="t2" for="password_current"></label>
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off" /> <input type="checkbox" id="togglePw" onclick="showPassword()" />
<label for="togglePw" class="fa"></label>
</p>

Removing input label when typing

I have an input field that I cannot use a placeholder for, instead I must use a label and place it as it was a placeholder, so right in the field. How can I hide the label when you start typing into the field, and make the label reappear hen all letters are removed from the field - so just like the placeholder ould behave?
My html:
<label class="PR_label" for="PR">My label</label>
<input type="hidden" name="PR" value="" id="TR">
EDIT: I realised this is not possible since my input field is hidden and you cannot enter/type anything since there is no fied to begin with.

You can place the label inside the textbox using position: absolute; and then hide the label when the user types, using an event listener:
var textbox = document.getElementById("input_box")
var label = document.getElementById("label")
textbox.addEventListener("keydown", function() {
label.style.display = "none"
}, false);
#input_box {
position: absolute;
top: 0;
left: 0px;
}
#label {
position: absolute;
top: 0;
left: 0px;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input value="" id="input_box">
<label id="label">Lorem ipsum</label>
<script src="code.js"></script>
</body>
</html>

If you want use your label as placeholder in your input field you can use CSS position.
* {
box-sizing: border-box;
}
.form-control {
width:50%;
padding: 0.625rem;
position: relative;
}
label {
position: absolute;
top: 1.7rem;
right: 1.625rem;
color: blue;
}
input[type="text"] {
display: block;
width: 100%;
padding: 1rem;
}
<div class="form-control">
<label class="PR_label" for="PR">test</label>
<input type="text" name="PR" value="a" id="TR">
</div>

HTML:
<div class='wrapper'>
<label class="PR_label" for="PR">My label</label>
<input type="hidden" name="PR" value="" id="TR">
</div>
If you plan to make it visible again:
const labelElement = document.querySelector('.PR_label')
const inputElement = document.querySelector('input')
inputElement.addEventListener('keydown', () => {
labelElement.style.display = 'none'
})
If you plan to not make it visible again:
const labelElement = document.querySelector('.PR_label')
const inputElement = document.querySelector('input')
inputElement.addEventListener('keydown', () => {
labelElement.remove()
})
css:
.wrapper {
display: grid;
grid-template: 1fr / 1fr;
}
input,
.PR_label {
grid-row: 1;
grid-column: 1;
}

Make use of a placeholder inside your input and also don't forget to add alternative keys for accessibility checks.
WITH PLACEHOLDER
<input id="TR" class="text" type="text" name="PR" value="" placeholder="PR" alt="PR">
WITHOUT PLACEHOLDER
Using jQuery
$(".input").each(function () {
var inputVal = $(this).val();
$(this)
.focus(function (event) {
if (this.value == inputVal) {
this.value = "";
}
})
.blur(function (event) {
if (this.value == "") {
this.value = inputVal;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="Example Value" class="input">

I have created a form using HTML and Javascript, I want to display the specific dialogue based on numeber of selection. But alert does not work here

The idea is for the user to select the options and the best employment
sector would be suggested by the form based on his selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Survey that will will give you suggestion.
</title>
<style>
/* Styling the Body element i.e. Color,
Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form (Color, Padding, Shadow) */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Styling form-control Class */
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
The form is made with HTML. and for javascript operations i have added
value=1 in the checkbox for generating the different output string.
please view the code below to understand better.
<body>
<h1>Your job type survey suggestion quiz</h1>
<!-- Create Form -->
<form id="form">
<!-- Details -->
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<!-- Input Type Text -->
<input type="text"
id="name"
placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">
Email
</label>
<!-- Input Type Email-->
<input type="email"
id="email"
placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">
Age
</label>
<!-- Input Type Text -->
<input type="text"
id="age"
placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>
<!-- Dropdown options -->
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label>
DO you like studying?
</label>
<!-- Input Type Radio Button -->
<label for="recommed-1">
<input type="radio"
id="recommed-1"
name="recommed">Yes</input>
</label>
<label for="recommed-2">
<input type="radio"
id="recommed-2"
name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio"
id="recommed-3"
name="recommed">Maybe</input>
</label>
</div>
<div class="form-control">
<label>Skills that you have
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox" name="inp" id="c" value=1>Coding</input></label>
<label for="inp-2">
<input type="checkbox" name="inp" id="d" value=2>Dancing</input></label>
</div>
<button onclick="checkCheckbox()">
Submit
</button>
</form>
Here as of now only 2 questions are in the form, I want to add more
questions and on based of the selection the form will suggest. In this
the alert or any message i`enter code here`s not shown neither there is any error.
<script>
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add=0
if (c.checked == true){
var y = document.getElementById("c").value;
var add=y;
return add;
}
else if (d.checked == true){
var n = document.getElementById("d").value;
var add += n;
}
else {
return document.getElementById("error").innerHTML = "*Please mark any of checkbox";
}
if(add==2){
alert('You are multi-talented! become a dancer or a coder');
}
else{
alert('Become a coder');
</script>
</body>
</html>
here on selecting dancing and coding a different output should be
given and on selecting either dancing or either coding a different
output string should be shown. please suggest for any modifications or
if there is a better way to complete this idea.

There are several errors in the script section. You can use Web Developer debugging in your browser to check them out. I can see that you are new to coding in general, so there are a couple of common mistakes we've all made in the beginning.
This is one way of writing the function so it works as I think you intended it:
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add = 0, val;
if (c.checked == true){
val = "coder";
add += 1;
}
if (d.checked == true){
val = "dancer";
add += 1;
}
if (add == 2) {
alert('You are multi-talented! become a dancer or a coder');
return true;
}
else if (add == 1) {
alert('Become a ' + val);
return true;
}
else {
document.getElementById("error").innerHTML = "*Please mark any of checkbox";
return false;
}
}
Also, you need to add return in the event handler of the button, to avoid it submitting when the form is invalid:
<button onclick="return checkCheckbox()">Submit</button>
And lastly add an element for the error message that is referred to in the script. Something like:
<div id="error"></div>

How do I make a text input non-editable for a part of it? [duplicate]

This question already has answers here:
How to prevent a user from removing the first three characters in a text input?
(6 answers)
Closed 4 years ago.
So I have a text input
<input type="text" value="+98912314789" class="telinfo">
Is there a way to keep 4 letter from the begin ?
I want to keep +9891 read only and the user can delete all part of this textbox except this part.

You can capture the keyup and blur (in case user directly copy paste the value in textbox) event
function handleEv( event )
{
var thisObj = event.currentTarget;
var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
if ( thisObj.value.indexOf( fixedValue ) != 0 )
{
console.log(thisObj.value, fixedValue);
event.preventDefault();
thisObj.value = fixedValue;
}
}
Demo of sample implementation
var el = document.querySelector( ".telinfo" );
el.addEventListener( "keyup", handleEv);
el.addEventListener( "blur", handleEv);
function handleEv( event )
{
var thisObj = event.currentTarget;
var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
if ( thisObj.value.indexOf( fixedValue ) != 0 )
{
console.log(thisObj.value, fixedValue);
event.preventDefault();
thisObj.value = fixedValue;
}
}
<input type="text" value="+98912314789" class="telinfo" data-fixedvalue = "+9891">

try this code may be it will help to resolve your issue
<input type="text" value="+98912314789" class="telinfo" id="telphone" onchange="staticData()" onkeyup="staticData()">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function staticData(){
var data=$("#telphone");
if(data.val().length<5)
{
data.val("+9891");
data.attr("readonly",true);
}
else
{
data.attr("readonly",false);
}
}
</script>

This question solved by #gurvinder372 but you could achieve this easier than it with Regex pattern:
function phoneNumber(selector, num) {
$(selector).on('input', function() {
var reg = /\+/gi;
if (!$(this).val().match(reg)) {
$(this).val($(this).val().replace(/([\d]+)/g, "+" + num + "$1"));
}
});
}
phoneNumber('.telinfo', '9891');
phoneNumber('.mobinfo', '78');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" placeholder="+9891" class="telinfo">
<input type="text" value="" placeholder="+78" class="mobinfo">
Update: Also I converted this to function to usable multiple times.

Try using two inputs one for readonly and second for editing -
<input type="text" value="+9891" readonly>
<input type="text" value="" class="telinfo">
Wrap it in a container to add both inputs on the same line.

The easiest way is separating the read-only text from input text
<input type="text" value="+9891" size="3" disabled>
<input type="text" value="">

make css and html like below change style as per your requirement
<div class="field">
<input type="text" value="" class="telinfo">
</div>
.field{
float: left;
width: 100%;
position: relative;
max-width: 240px;
}
.field:before{
content: "+9891";
position: absolute;
left: 15px;
top: 10px
}
.field input{
background: #fff;
border: 1px solid #ddd;
padding: 10px 15px 10px 58px;
font-size: 14px;
line-height: 18px;
color: #000;
}