Button don't executes JS - javascript

I'm interested on learn about the programming world and I'm trying some basics about making simple web plugins. The thing is I'm not able to make my button run a little JS, any tip? Thanks a lot!!
<button id="button1" onclick="myFunction()">Start the script</button>
<script type="application/javascript">
document.addEventListener("button1", myFunction);
function myFunction() {
var para = document.createElement("p");
var ht1 = '<p class="pop">Working</p>';
var ht2 = '<p class="image"><img src="image.png"></p>';
};
</script>

First of all if you want that something would happen you need to write that in the function. You already wrote variables, but you did nothing with them, so nothing could happen.
Try this :
<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>

Related

Button Clicked true or false - JavaScript

I am a Bit Beginner In JavaScript. So I need a code about { If we clicked a button a function need to run} more of them suggested this but it still not working ! and I don`t know why? Can you solve it?
if(document.getElementById("btn").clicked == true){
//some code here
console.log("working");
}
<button id=""btn>ClickEvent</button>
Do not use the if. if statement is executed on page load.
Instead, use Onclick() for example :
var data = "";
function clickBtn() {
if(data != "")
document.getElementById("result").innerHTML = "Hello World !";
else
getData();
}
function getData() {
data = "Hello World !";
}
<button onclick="clickBtn()">Click me</button>
<p id="result"></p>
Good question, lets use the an HTML file that references a JavaScript.
So the first file lets call it webpage.html
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" value="save" onclick="save()"></input>
<input type="button" value="display" onclick="print()"></input>
<div id="area"></div>
</body>
</html>
And the second file script.js
function save()
{
StringTest="Hello world";
}
function print()
{
document.getElementById("area").innerHTML=StringTest;
}
The approach might be a little different but this is recommended as you would more control over the elements in the script.
For example:
<input type="button" will tell the script that it is a form input of the type button whose click will call the function print() in the JavaScript
document.getElementById("area")captures the elements that we define from the Document Object Model(DOM)

My get element by ID is not working

There is something wrong with this code.
HTML
<p id = "Krishna"></p>
JavaScript
document.getElementById("Krishna").innerHTML = "Hello"
You are not calling your script in the code above. I use the same code with a function:
<script>
function fun(){
document.getElementById("Krishna").innerHTML = "Hello";
}
</script>
</head>
<body onload='fun()'>
<p id = "Krishna"></p>
</body>
I hope it works for you.

Random button that reload a div or script not page using jquery or javascript

I'm really new at this and I need a random button on my page that would show a new line of information in a div every time someone click on the random button. I was also wondering if there is over 800 lines is it possible to put it in an outside file as txt or html.
Here is what I got so far and well it doesn't work and I'm getting confuse... Please help
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#text').hide();
$('a#random').click(function(){
$('#text').toggle();
})
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('#text').innerHTML=textarray[rannum];
}
var textarray = [
"Hello",
"How are you",
"Good Bye"
];
$("#text").load()
})
</script>
<body>
<div id="text">Line to Show</div>
RANDOM
</body>
Uh. Pretty much this:
$('a#random').click(function(){
$('#text').toggle();
RndText(); //you're good
});
Although I will point out that RndText() uses document.getElementById when it could use $("#text") instead. (there's a .html() method that will write the value instead of the .innerHTML property).
document.getElementById is also not currently working because you used "#text" instead of "text", jQuery uses CSS selectors, getElementById does not.
Add execution of RndText when you clicks on Random button.
$('a#random').click(function(){
$('#text').show();
RndText();
})
This will give you a button and you can run this code by clicking the button below. However, I did not quite understand you second part of the question: 800 lines in separate file, what do you wanna do with it? Tell me so that I can helo you further...
Editted:
<?php
$data = file_get_contents('demo.txt');
$lines= split("\n",$data);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var textarray = <?php echo json_encode($lines); ?>;
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
$('#text').text(textarray[rannum]);
console.log(textarray[rannum]+" "+rannum+" "+textarray.length);
}
$(document).ready(function(){
$('#text').hide();
$('#random').click(function(){
$('#text').show();
RndText();
});
});
</script>
<body>
<div id="text"></div>
<button id="random">RANDOM</button>
</body>

HTML/JavaScript it won't let me append to a div

<html>
<head>
</head>
<body>
<div id = "start">
<h3>Start</h3>
<script>
if(Go==false)
document.write("<p>None </p>");
else
document.write("<p>Month: Day: Hour: Min: </p>");
</script>
</div>
<script>
var change = function(){
document.getElementById('start').innerHTML +=document.write("<p>NO</p>");
};
</script>
<input type = "button" value =start onClick = "change(); return false;"/>
<body>
</html>
With this it refreshes the page and I need it to be added to the div "start". Any Ideas? I have been looking up things online with fixes and none seem to work for me. I use chrome, I don't know if that will help.
Try this:
var change = function(){
document.getElementById('start').innerHTML += "<p>NO</p>";
};
This is a similar question of question on SO.
Is as to avoid of the use document.write("<p>NO</p>"); because this needs to refresh page.
Then I suggest for you use document.getElementById('start').innerHTML +="<p>NO</p>";
Or create the element!!
var p= document.createElement('P');
p.appendChild( document.createTextNode("NO") );
document.getElementById("start").appendChild(p);
Yup, what sjkm said. document.write does not return anything, it just appends whatever you give it to the end of the document. Also, your Go variable isn't declared and has no value assigned to it

Using the GetElementByClassName and GetElementById

I want to print variables in the same paragraph but on different lines. I was using this:
<p id="demo1"></p><p id="demo2"></p><p id="demo3"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
document.getElementById("demo1").innerHTML=lastname;
document.getElementById("demo2").innerHTML=age;
document.getElementById("demo3").innerHTML=job;
}
</script>
but it prints each value in a new paragraph. I tried changing to classname instead but I'm doing something wrong. Help me please. TY.
<p class="demo1, demo2, demo3"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
document.getElementByClassName("demo1").innerHTML=lastname;
document.getElementByClassName("demo2").innerHTML=age;
document.getElementByClassName("demo3").innerHTML=job;
}
</script>
Also can you use
document.getElementById("demo1").innerHTML=lastname;
and more then one id and value at then end? Something like this?
document.getElementById("demo1,demo2,demo3").innerHTML=lastname,age,job;
How can you read that correctly, I know the above not valid, but what is the correct method to do it?
Ty
Jared Moore
<p id="demo1"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
var concat = lastname + '<br />' + age + '<br />' + job
document.getElementById("demo1").innerHTML=concat;
}
</script>
The reason that the three parts are in three different paragraphs is that you have three p elements. If you want all the values to be in the same paragraph, you should use an inline element, such as span. This is what it would look like:
<p><span id="demo1"></span><span id="demo2"></span><span id="demo3"></span></p>
By the way, using innerHTML is asking for someone to hack your site; if your real code looks anything like this:
element.innerHTML = userSuppliedData
then anyone can run whatever JavaScript they want on your page by passing this:
<script type="text/javascript">
alert('All your site are belong to us.');
</script>
This is known as cross-site scripting, XSS. Instead, do this:
element.appendChild(document.createTextNode(userSuppliedData))

Categories

Resources