We Keep Coding

Javascript inside an html attribute

I have a pretty simple query here. I have a view page with an div and a form element. This is how they look.
<div id="candy" value="valueOfCandy" ></div>
<input type="text" value="javascript:document.getElementById('candy').getAttribute('value')"/>
I need to access the value of candy inside input's attribute (it can be any attribute).
I tried the code as I have shown above but that didnt work. I researched on StackOverflow too but couldnt find anything satisfactory. Please help out.
Edit: Thank you everyone. I found the answer to that, which I am gonna mark. Also, deleting this question so that it doesnt confuse someone else.

If I assume you want to do this at page load, do it like this
Note 1, custom attributes should have a data- prefix and use .dataset to access its value.
Note 2, for older browsers like IE10 and below, you need getAttribute (as in 2nd sample below).
Stack snippet 1
<div id="candy" data-value="valueOfCandy"></div>
<input id="candy2" type="text" value="" />
<script>
document.getElementById('candy2').value =
document.getElementById('candy').dataset.value
</script>
Stack snippet 2
<div id="candy" data-value="valueOfCandy"></div>
<input id="candy2" type="text" value="" />
<script>
document.getElementById('candy2').value =
document.getElementById('candy').getAttribute('data-value')
</script>

Do it in JavaScript outside of code but after the objects exist.
Here's an example of how to achieve this:
var candy = document.getElementById('candy').getAttribute('data-value');
document.getElementById('input').value = candy;
<div id="candy" data-value="valueOfCandy" ></div>
<input id="input" type="text"/>
As mentioned in the comments, please make sure your JavaScript code is loaded after your markup. There are various ways to do this, including waiting for the dom to load.
See $(document).ready equivalent without jQuery and How does the location of a script tag in a page affect a JavaScript function that is defined in it? for more information.

Try this
document.getElementById('input').value = document.getElementById('candy').dataset.value
<div id="candy" data-value="valueOfCandy" ></div>
<input id="input" type="text" value=""/>

This is not how you should be doing this.
JavaScript should be separated out of the HTML completely to avoid a whole host of issues. Including JavaScript in the HTML as you are attempting is a 20+ year old technique that was used before we had standards.
Next, a div element can't have a value attribute. value is only for form fields. But, you can create a data-* attribute, which allows for you to create custom attributes. You can then extract that value using the .dataset property.
See below:
// This code would be placed inside of <script> and </script> tags and the whole
// thing would be placed just before the closing body tag (</body>).
document.getElementById("result").value = document.getElementById('candy').dataset.value;
<div id="candy" data-value="valueOfCandy"></div>
<input type="text" id="result">

Put that code either within a script tag or in a separated js file.
Further, always bind the event DOMContentLoaded when you need to manipulate DOM elements.
DOMContentLoaded
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
This way, your logic is totally consistent.
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
document.getElementById('candy2').value =
document.getElementById('candy').getAttribute('value')
});
<div id="candy" value="valueOfCandy"></div>
<input id="candy2" type="text" value="" />
A recommendation is to use data-attributes because the value attribute is related to form fields:
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
document.getElementById('candy2').value =
document.getElementById('candy').dataset.value;
});
<div id="candy" data-value="valueOfCandy"></div>
<input id="candy2" type="text" value="" />

JavaScript - how to change field values oninput and onchange

I can't figure out how to change form field values with the oninput or the onchange method. For example, I need to make one input field to change its value as soon as another input field is being changed. So I'm trying:
<input type="number" id="a" value="999.99" oninput="updateInput(value)"/>
<input type="number" id="b" value=""/>
<script>
$(document).ready(function updateInput(value) {
document.getElementById("b").value = document.getElementById("a").value;
});
</script>
It doesn't do anything. What am I doing wrong?
In another case, I need to change the value of a drop-down according to another drop-down (with an if clause). Since the simple script above doesn't work already, I don't even have a clue what to do about the second one...

There are a few issues here; the first one to sort out is where you're declaring your functions. Javascript has a concept of scope, which you can think of as kind of a container for declared variables. The reason your function isn't doing anything is because the definition of updateInput is locked away inside your jquery $(document).ready scope.
Once you take that definition out of the jquery wrapper, it's available to the global window scope - which is the one you're accessing in your oninput. I should point out that there are more flexible/useful ways to put an event listener on something, but what you have will work, if this is a simple use case.
function updateInput(value) {
document.getElementById("b").value = document.getElementById("a").value;
}
<input type="number" id="a" value="999.99" oninput="updateInput(value)"/>
<input type="number" id="b" value=""/>

Your function is undefined in the markup, because it is passed to the ready and scoped there. It will better to not pass the update function to the ready, but create inside it and attach that function to the input from code. Don't get every time the DOM elements, instead get once and use variables to keep them.
Also you have mixed jQuery approach with pure Javascript approach. I think it will be better to use one of them.
With jQuery
$(document).ready( function() {
const aInput = $("#a");
const bInput = $("#b");
aInput.on('input', function () {
bInput.val(aInput.val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99"/>
<input type="number" id="b" value=""/>
With pure Javascript
window.onload = function() {
const aInput = document.getElementById("a");
const bInput = document.getElementById("b");
aInput.addEventListener('input', function() {
bInput.value = aInput.value;
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99"/>
<input type="number" id="b" value=""/>

You have to define the updateInput() function outside of $(document).ready(), so that you can call it from the rest of your code, otherwise it is only scoped in there.
Secondly, the argument the function takes is never used, so I took the liberty of removing it.
Thirdly, to call this function as soon as the page is loaded, just call it inside $(document).ready() and you are good to go.
Here's a working example:
function updateInput() {
document.getElementById("b").value = document.getElementById("a").value;
}
$(document).ready(updateInput());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99" oninput="updateInput()" />
<input type="number" id="b" value="" />

Input type ="number" Value does not update in html is this normal

I have not used this before just now and noticed it does not update its value in html?
Basically i have a Html Table with this in it , and user will update it to a quantity needed and Submit and i will take the Html parse it to get the things.
But in the html i see the value of input box is always 1, i it never updates itself
<input type="number" id="testNumber" value="1" min="1" max="100" />

While yes, the markup indicates that the value is still 1, if this form were to be submitted, the displayed value of the number input would still get returned.
You can verify this by running the following in your browser's console:
var input = document.getElementById('testNumber');
input.value;
EDIT 1:
If you want the value of the html to match the value of the dom element, assign it yourself, like so:
input.setAttribute('value', input.value);

This is just a sample. But it handles the INCREASE(+)/DECREASE(-) buttons clicked and updates the input value.
$("input[type=number]").click(function(e) {
$(this).attr( 'value', $(this).val() );
});

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
jQuery('#input1').keyup(function(){
jQuery("#testNumber").val(jQuery(this).val());
});
});
</script>
</head>
<body>
<form>
Change Value:
<input type="text" name="input1" id="input1">
<br/>
<br/>
result
<input type="text" id="testNumber" value="1" min="1" max="100" readonly="" />
</form>
</body>
</html>

if I understood this question right, you need to change the number input on event.
here is you can try
$("#quantity").val(1);
on event it will change the #quantity to 1 even you would see this on the browser.

My input had type="number" and I was setting a non numeric value to it using JavaScript. This is a really subtle mistake and hard to notice.
PS: Probably not an answer to the question above, but all my google searches returned this page as a first result.

A simple javascript number onchange function

I have a simple bit of javascript code that I think should be working, but it isn't. The idea for now is basically just to change the content of a div when a number has been input to a box. I'll make it do something more complicated later, but I need it to work first.
So I have this HTML page:
<form>
<input type="text" name="here" onkeyup="revChange()" />
</form>
<div name="there"></div>
running with the following javascript:
var revChange = function () {
document.there.innerHTML = "<p>Thing</p>";
};
The result is that nothing happens when I enter anything in the input box, it just stays blank. I've tried using onchange, onkeypress, onblur, onkeyup, I've tried the function with brackets, without brackets, using arguments in the brackets (including this.value), I've tried putting several different things inside the function, I've even tried just calling the function directly from the script. No matter what I do, this function does not seem to want to do anything. I can not work out what is going on, so I would like some explanation if possible. Oh yea, and this is just pure javascript, not jQuery or anything.

document.there.innerHTML is not how you should reference a non form element. Give it an id, and use getElementById

You should change the name attribute on your div to an id, and use getElementById
<script type="text/javascript">
var revChange = function () {
document.getElementById("there").innerHTML = "<p>Thing</p>";
};
</script>
<form>
<input type="text" name="here" onkeyup="revChange()" />
</form>
<div id="there"></div>

this seems to be working at my end
<form>
<input type="text" name="here" onkeyup="revChange(this)" />
</form>
<div name="there" id="das"></div>
<script>
var revChange = function (abd) {
document.getElementById('das').innerHTML = abd.value;
};
</script>

Just change your function to:
var revChange = function (ref) {
document.getElementsByName("there")[0].innerHTML = ref.value;
};
Also change your html to:
<form>
<input type="text" name="here" onkeyup="revChange(this)" />
<div name="there"></div>
</form>
This should work.

How to run Javascript codes that are put in a textbox (in HTML5)

I have a textbox on my html page, I'd like to run the javascript code that people put it the textbox. How can I do that?

You can create a new script dynamically like found here
Here's a quick example you can copy and paste into an html file and see it work. You'll notice that once called, the page reloads and stalls out. This could be solved by using ajax and a seperate page the executes the code and returns a value or string or whatever it is your code should return.
<html>
<head>
</head>
<body>
<script>
function doIt() {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.innerHTML = document.getElementById("textarea").value;
headID.appendChild(newScript);
}
</script>
<textarea name="textarea" id="textarea">
alert("Alert");
</textarea>
<input type="button" value="Do It" onclick="doIt();" />
</body>
<html>

You can use document.getElementsByName
<input name="textbox" type="text" />
<input name="buttonExecute" onclick="execute(document.getElementsByName('textbox')[0].value)" type="button" value="Execute" />
something similar i found here

You could also create a JavaScript function to get the content using jQuery and execute the code you wanted but you must set an id to the textbox
<script>
$("#run").click(function () {
var element = $("input#textbox").val();
//code to execute
}
</script>
<input type="textbox" value="Type something" id="textbox"></input>
<button id="run">Run Code</button>

I think the easiest native JS way to do it is to use a textbox's value attribute and eval() its content, as it doesn't require to create any script elements (that would be sitting there until the page is reloaded) or big constructs:
function runIt() {
eval(document.getElementById('code-input').value);
console.log('Ran code from textbox!');
}
<textarea id="code-input" placeholder="Input any JS code here"></textarea>
<button onclick="runIt()">Run it!</button>
This example is a text box and with every click on the button "Run it!" the text that's inside of it is executed as JavaScript.
In fact this answer is just a complicated way to say: "Just eval() a textbox's value."