Develop Reference

Stop Input From Inheriting Another Input's Value On Button Click

I'm creating a post slug input, so when editing post title input it'll inherit it's value to the disabled slug input amd there is a button when clicking it enables the disabled input. It is working good, but I want on clicking the button it'll stop Inheriting values.
Here is my code :
<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>
<script>
document.querySelector('#a').addEventListener('keyup', () => {
document.querySelector('#b').value = document.querySelector('#a').value;
});
document.querySelector('#btn').addEventListener('click', () => {
document.querySelector('#b').disabled = false;
});
</script>
I've googled, but i haven't found.
Thank You

You can removeEventListener of the a element keyup after clicking the button.
function onAKeyup() {
document.querySelector('#b').value = document.querySelector('#a').value;
}
document.querySelector('#a').addEventListener('keyup', onAKeyup);
document.querySelector('#btn').addEventListener('click', () => {
document.querySelector('#b').disabled = false;
document.querySelector('#a').removeEventListener('keyup', onAKeyup)
});
<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>

Reset (reset to previous value) only the form fields that are changed

I need to reset only the form fields that are changed (reset to previous value).
I tried to use the reset but it completely resets the entire form and I don't need this.
How can I do this?
function clearResult() {
document.getElementById("save").reset();
}
<div class = "container">
<form method="post" id="save" onload="onLoad()">
<div class="field">
<label for="id"> ID:</label>
<input type="number" id="id" name="id" />
</div>
<div class="field">
<label for="type"> Fragment Type: </label>
<input type="text" id="type" name="type" />
</div>
<div class="button">
<button type="submit" class="full">Save changes</button>
<input type="button" value="Cancel" onclick="clearResult()" />
</div>
</form>
</div>

First of all you should to store the predefined values of form elements to set them back when you want to reset them back.
Then you can use this globally defined initial values to set them back whnever reset event occurs.
var id, type;
const form = document.getElementById('save');
document.onload = (event) => {
id = form.id.value;
type = form.type.value;
};
function clearResult() {
form.id.value = id;
form.type.value = type;
};

It was simple. When page load just get values from that fields.
Make with document.onload:
var firstValue = document.getElementById("yourFieldId").value;
After form submit get values like below:
var currentValue = document.getElementById("yourFieldId").value;
And after submit in reset check if CURRENT VALUES equal with VALUES FROM FIRST TIME
Example
if(firstValue != currentValue){
document.getElementById("yourFieldId").value = firstValue;
}

not getting value in html from with javaScript

I am not getting value in the alert box I am trying to get all values by using function with onclick. It gave me an empty value so how do I get all value with this keyword.
form
<form>
<input type="text" id='textid' />
<button class="btn" type="submit" onclick="myfunc(this);">click</button>
</form>
function
function myfunc(el){
let x = el.value;
alert(x) }

You are alerting value of button, instead you should first get the input and then get its value using .value property
const input = document.querySelector("input");
function myfunc(el) {
let x = input.value;
alert(x)
}
<form>
<input type="text" id='textid' />
<button class="btn" type="submit" onclick="myfunc(this);">click</button>
</form>

Why is my console not logging search input?

New to web programming, I am trying to log HTML search query to the console after saving it to a variable. For some reason, when I execute the search, nothing is logging to my browser's inspect console. Is there a piece that I am missing here?
Here is my HTML form
<form id="searchForm">
<input type="search" id="userInput" class="search" placeholder="Search" />
<input type="submit" onclick="window.location.href='www/results.html';" id="subButton" value="Search" />
</form>
I have a file called input.js that contains a function that should log my input.
function getInput() {
const userInput = document.getElementById('userInput').nodeValue;
console.log(userInput);
return userInput;
}
I also have the main script that call getInput.
const subButton = document.getElementById('subButton');
if (subButton) {
subButton.addEventListener('click', getInput, false);
}

You have to get the value of input field. You should use value instead of nodevalue. The following code would do the job -
function getInput() {
const userInput = document.getElementById('userInput').value;
console.log(userInput);
return userInput;
}
const subButton = document.getElementById('subButton');
if (subButton) {
subButton.addEventListener('click', getInput, false);
}
<form id="searchForm">
<input type="search" id="userInput" class="search" placeholder="Search" />
<input type="submit" onclick="window.location.href='www/results.html';" id="subButton" value="Search" />
</form>
nodeValue is used to get the value of a node which is different that what you are trying to get. You can read more about it here and there's also a good explanation on this answer .

Trigger checkbox click with button

I'm trying to change my 'send' button which onClick sends a message from an input box to a div, to also trigger the click of a 'checkbox' input.
HTML
<button type="submit" class="btn btn-default">Post</button>
<input name="stry" type="text" id="stry"/>
<input name="nope" type="text" id="message-input"/>
<input type="checkbox" name="sendsms" onclick="copyStory(this)">
*These buttons are actually in a form
JS
function copyStory(ch) {
if (ch.checked)
var text1 = document.getElementById("message-input").value;
else
text1 = '';
document.getElementById("stry").value = text1;
}
I've searched around but I can't find a way to make the send button trigger the checkbox, any suggestions?

So what you need is to have same handler for both onclick and onchange events. Try this way,
HTML :
<input type="button" id="sendButton" value="Send" onclick="copyStory(this)" />
<input name="nope" type="text" id="message-input"/>
<input type="checkbox" name="sendsms" onchange="copyStory(this)"/>
<div id="msgDiv"></div>
javaScript :
function copyStory(ch) {
var text1
if (ch.checked || ch.id == "sendButton")
text1 = document.getElementById("message-input").value;
else
text1 = document.getElementById("msgDiv").innerText = "";
document.getElementById("msgDiv").innerText = text1;
}
jsFiddle