How do I show a variable change - javascript

I'm new to coding. I'm trying to make a website to track my homework. I want it to show what I have to do. This is my code.
<p id="demo">To do now.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "do"'>Click Here!</button>
var do="5";
how do I get "To do now." to 5.

You can't have Javascript just floating in an HTML file, as your browser won't know what to do with it. All Javascript should either be enclosed by <script> tags or in an external file and referenced with a <link> tag.
Correct me if I'm wrong, but as I understand it, you want the "To do now." to change to 5.
If so then you don't need your do variable. You would just change your onclick attribute value as follows:
<button type="button" onclick='document.getElementById("demo").innerHTML = "5"'>Click Here!</button>
Alternatively, if you wanted to have the text to change to 5 using a Javascript variable, you would open a script tag and insert a function to do so like this:
<script type="text/javascript">
function changeText() {
var doo = 5;
document.getElementById('demo').innerHTML = doo;
}
</script>
<p id="demo">To do now.</p>
<button type="button" onclick="changeText()">Click Here!</button>
I'm not too sure why you want to do this but I gave you this option anyway incase you did.
As you can see, I changed the do variable that you used to doo as you can't use the first version as a variable name. This is due to the fact that we use do as a keyword for loops. Check out w3's page on do/while loops here.
If you say you're new to programming then I thoroughly recommend using w3 schools HTML, CSS, and Javascript tutorials as once completed, you should have a much better understanding about how Javascript interfaces with HTML.

do is a predefined word in JavaScript, so you cannot use it as a variable. try something else. you can try this
<p id="demo">To do now.</p>
<button type="button" onclick="var doit='5'; document.getElementById('demo').innerHTML = doit;">Click Here!</button>

I don't recommend declaring functions in the html structure. It is better to put the JavaScript logic in the file separately, as in my example.
var inner = '5';
document.querySelector('button').onclick = function() {
document.getElementById("demo").innerHTML = inner;
}
<p id="demo">To do now.</p>
<button type="button">Click Here!</button>

Related

Passing variable values to and from an inside iframe

I have a script in the iframe html file, and one in the main html file. I guess I can give names to these scripts if needed (its seems you can give names to everything).
I am trying to pass variable values to and from the main html file and the iframe.
So in the main file I wrote :
<script>
var test2 = 21;
document.getElementById("bottom1").innerHTML=test2;
</script>
This functions, it displays 21.
I have a button :
<div class="button" id="button" align="center">
<form>
<input type="button" value="New" onclick="clearValues(); return false;">
</input>
</form>
</div>
I have a function :
function clearValues() {
window.frames['middle'].test = test2;
document.getElementById('middle').contentWindow.location.reload();
}
In the frame, I have :
<script id="here">
... Some stuff ...
var test;
document.getElementById("up1").innerHTML=test;
</script>
This functions, it displays "undefined". But when I click the button, it still displays "undefined" instead of 21. I guess the variable "test" gets redefined when the iframe is reloaded.
But how to avoid that beats me.
No one seems to offer a clever suggestion, so I'll use cookies. Global variables names and values are going to be stored in a cookie. KISS (= "Keep It Simple and Supid").
Then I can have 2 functions, one which returns the value of the variable given its name and one which sets it.
If later on someone has a better idea, I would be very interested to read it.

How do I make a form's values change a page's CSS in real-time (without having to refresh the page)?

I am attempting to change the CSS on the page as a user types values into a form using javascript. For example - if they type a color value into said field it turns said button to that color. Or changes size if they provide input in the size field. I have not been able to find any examples relating to this. If you could point me to any resources regarding this that would be awesome!
**This is my first post, please let me know if I am doing anything incorrectly.
this input receives code of colors. ff0 - for example
var btn = document.getElementById('btn');
function changeColor(input) {
btn.style.background="#"+input.value;
}
<form>
<input id="inp" type="text" onInput="changeColor(this);">
<button id="btn">Click</button>
</form>
Funny enough this is something I decided to do a few weeks ago, you just create a blank style in the head section of your html page, add an id and use jquery to set the content of the style upon keyup of what ever you decide to use to set the values, e.g.
<pre contenteditable></pre>
<script>
$(document).ready(function(){
$('pre').keyup(function(){
$('#yourstyletagid').html($(this).html());
});
});
</script>
Something like this?
var button = document.getElementById("button");
var b = button.offsetWidth;
function a(input) {
button.style.width = b + input.value + "px";
}
<form>
<input type="number" onchange="a(this);" min="5">
<button id="button">Hello World</button>
</form>

Trying to change value of Textarea (using Skulpt)

Okay, so I'm using Skulpt to program Python on a webpage.
I would like the text in the interpreter change once a button is clicked.
But no matter how I try, the code in the text area doesn't change.
However, if I 'alert' the value of the text area, it brings up the changed version, indicating that the button works.
I've also found this question:
Set value of textarea in jQuery
but nothing in here helped in my case :(
Here is how I try it:
<textarea id="theTextArea">print 'Hello World!'</textarea>
<div id="controls">
<button type="button" onclick="replaceCode()">Replace</button>
<button type="button" onclick="testAlert()">Alert Me</button>
</div>
<script>
function replaceCode(){
document.getElementById('theTextArea').value = "print 'Thats new code'";
};
function testAlert(){
alert(document.getElementById('theTextArea').value);
};
</script>
Also I've tried changing .innerHTML, .text and nothing actually replaced the text in the textarea.
If anyone thinks it could help, I could add the full HTML document with the whole Skulpt setup for online python interpreter, in case it somehow doesn't let me change the value of the textarea in a regular way. But I prefer not to have a wall of code for now if it's not needed for now.
You forgot brackets in your onclicks. You should use HTMLTextAreaElement.innerHTML to change the textarea's content
function replaceCode(){
document.getElementById('theTextArea').innerHTML = "print 'Thats new code'";
};
function testAlert(){
alert(document.getElementById('theTextArea').innerHTML);
};
<textarea id="theTextArea">print 'Hello World!'</textarea>
<div id="controls">
<button type="button" onclick="replaceCode()">Replace</button>
<button type="button" onclick="testAlert()">Alert Me</button>
</div>
So it turns out Skulpt was getting in my way of modifying python code on a button click. I needed to use a function which was defined probably in one of the imported documents which come with Skulpt. The function looks like this:
editor.setValue("print 'Thats new code'");
And then it actually changes in the textarea :)

Uncaught ReferenceError: var is not defined

I have two textarea which starts on empty value.
Then when I fill the first textarea with id "postcrudo" I want that the next textarea (with id "posthecho") getthe same value as the first, and also show the same. Like a two way binding, like AngularJS, but only with JavaScript and jQuery.
This is the JS:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$("#postcrudo").val(function(){
algo = this;
});
postHecho = postCrudo;
console.log("OK!");
});
});
</script>
and this the HTML:
<body>
<div style="width:700px;float:left;">
<p>Post crudo:</p>
<p><textarea cols="100" maxlength="99999" name="postCrudo" id="postcrudo" rows="60"></textarea></p>
</div>
<div style="width:700px;float:left;">
<p>Post pasado:</p>
<p><textarea cols="100" maxlength="99999" name="postHecho" id="posthecho" rows="60"></textarea></p>
</div>
<div style="clear:both;"></div>
<p><input type="submit" value="submit" id="submit" /></p>
</body>
The error in Chrome console is:
Uncaught ReferenceError: postCrudo is not defined
Is this what you want?
https://jsfiddle.net/a4nmto6t/1/
Just get the value of the first textarea and change the value of the second to that:
$(document).ready(function(){
$("#submit").click(function(){
var postCrudoVal = $("#postcrudo").val();
$("#posthecho").val(postCrudoVal);
console.log("OK!");
});
});
Neither postHecho nor postCrudo are declared (by you**), and even if they were, assigning one of them to the other does not do what you want. You have to assign the value of the first textarea to the value of the second textarea using (in this case) jQuery selectors, because they ARE the ones referencing the DOM elements (the textareas).
** Elements that have an id are set as global 'variables' by default, but you shouldn't use them; it is instead suggested that you either use the DOM API to find elements or use jQuery (which uses the DOM API behind the scenes).
There is no declaration of postCrudo so it is undefined. Also why would you want to try and do this yourself instead using something like AngularJS to handle data bindings. You are essentially doing more work for no reason. Plus you have to handle all aspects of 2 way data binding manually. To me there is smarter ways to do this.
Your element id postcrudo is all lowercase. postCrudo is indeed not defined
This linepostHecho = postCrudo; makes no sense, I think you're trying to do this:
$('#posthecho').val($('#postcrudo').val())
JavaScript syntax is case sensitive.
`postHecho = postCrudo;`
Should be:
`postHecho = postcrudo;`

Javascript's equivalent to "goto" [duplicate]

This question already has answers here:
How can I use goto in Javascript?
(16 answers)
Closed 8 years ago.
I'm programming a basic click counter for my site on a hidden Easter egg page when I encountered a problem I never had when programming web before: Does Javascript have an equivalent to other programming languages goto. The code is below, if anyone can make adjustments to it so that the displayed "clicks" are altered and do not remain at 0 while the variable itself if changed later in the code.
<html>
<body>
<h2>
<script>
var clicks = 0
</script>
<script>
document.write(clicks)
</script>
<br>
<button onclick ="clicks = clicks + 1">Click me</button>
</body>
</html>
What you want is to write and then repeatedly call a function. And you don't want that function to call document.write; you probably want it to append text to an existing DOM node.
I suggest picking up an introductory book on JavaScript.
Create the following html content:
<div id="myDiv"></div>
Also, after updating the clicks variable value, update the div content like this:
document.getElementById("myDiv").innerHTML = clicks;
Although I'm a novice at Javascript, I have experience with Python, Java and C++ and the only real GOTO alternative is a user defined function. In javascript, I believe it is just function functionname { code here }
No. Generally using goto statement is bad idea.
What you need to do is to write clciks to specific element each time when user clicks. Like this:
<html>
<body>
<h2>
<script>
var clicks = 0
</script>
<div id="myinfo"></div>
<br>
<button onclick="clicks = clicks + 1; document.getElementById('myinfo').innerHTML=clicks">Click me</button>
</body>
</html>
Also, you could use shorter command:
<button onclick="clicks = clicks + 1; myinfo.innerHTML=clicks">Click me</button>

Categories

Resources