How to get element by id inside another element Javascript [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
My code is below. But when I give the above code the element with id "demo" doesn't gets selected. How can I do that in JS?
document.getElementById("demo").onclick = function() {myFunction1()};
function myFunction1() {
document.getElementById("demo").classList.remove("flame");
}
.flame {
color: red;
}
<div class="candle">
<div id="demo" class="flame">Click me</div>
</div>

If my understanding is right, Try using this one
document.getElementById('demo').onclick = function(event) {
callback(event)
}
function callback (event){
var classList = event.target.classList
if (classList.contains('flame')) {
console.log('contains')
classList.remove('flame')
} else {
console.log('notfound')
classList.add('flame')
}
}
.flame {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="candle">
<div id="demo" class="flame">Click me</div>
</div>
</body>
</html>

First Why are your using a method to call another function when you can use onclick directly in the html element also make sure you are including the script in a right way since the function function1 needs to be defined before calling it in the Dom element.
So you can use this in the html element
<div class="candle">
<div id="demo" class="flame" onclick="myFunction1()">Hello</div></div>
And for the Javascript:
function myFunction1() {
document.getElementById("demo").classList.remove("flame");}
You can check the fiddle: https://jsfiddle.net/ytdmk6my/2/

Related

Button on HTML calling a google script [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have an code.gs that creates a menu that opens a sidebar with html.
My html is like that:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<button onclick='ativarFeedbacks()'>Feedback</button>
<div id="aviso">aaasaaa</div>
<script>
function callback(resposta) {
document.getElementById("aviso").innerHTML=resposta;
}
function ativarFeedbacks() {
google.script.run.withSuccessHandler(callback).escrever();
}
</script>
</body>
</html>
My code.gs is like this:
function onOpen(e) {
FormApp.getUi()
.createAddonMenu()
.addItem('Configurar feedbacks', 'showSidebar')
.addToUi();
}
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('teste2')
.setTitle('Feedback');
FormApp.getUi().showSidebar(ui);
}
function escrever(){
return "<h1> salve salve </h1>"
}
But, when I run onOpen, I open the sidebar and press the button, nothing happens. My innerHTML on id "aviso" doesn't change like nothing was returned by escrever(). I am not understanding this behavior. What should I do?
The function escrever() doesn't exist. Use this instead:
google.script.run.withSuccessHandler(callback).escreverFeedbacks();

Does document.write remove css styling?

I'm trying to run the script without removing CSS styling.
For example, here I want the background to be blue still when the random number shows.
function myFunc() {
document.write(Math.floor(Math.random() * 999));
}
body {
background-color: blue;
}
<button onclick="myFunc()">Get random num</button>
Put value inside of another element instead of making new document.
Try:
let s = document.createElement("span");
s.innerHtml = Math.floor(Math.random()*999);
body.appendChild(s);
Edit:
I didn't see that #Chris G answered your question but here is a bit different approach with generating new element for each random instead of replacing it. I guess his answer suits you better.
that is not a good practice
You can try this
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body{
background-color: blue;
}
</style>
</head>
<body>
<p id="text"> </p>
<button onclick="myFunc()">Get random num</button>
<script>
function myFunc(){
document.getElementById("text").innerHTML=( Math.floor(Math.random()*999));
}
</script>
</body>
</html>
Yes, Once you click on the button then your html code changes to:
<html><head></head><body>934</body></html>
It is removing the style as well.
As per Link
Yes, it does. This is because document.write() is overwriting all style and link elements that may be present in the document. document.write() completely overwrites everything in the document.
Example:
function doIt() {
document.write('text')
doSomethingElse() // Will not get executed since the script tags have been removed
}
<button onclick='doIt()'>Use document.write</button>

Javascript does nothing [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
This following code do nothing .When i click button it should tell my how many guess computer has taken to find my given input. I am using Adobe Dreamweaver.What might be wrong ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p> How many finger ? </p>
<p><input id="myNum" type="text"</p>
<button id="guess"> Mafia </button>
<script type="text/javascript">
document.getElementById('guess').onclick=function(){
var myNumber=document.getElementById('myNum').value;
var GotIt=False;
var NumOfGuess=0;
while(GotIt==False)
{
var guess=Math.random();
guess=guess*6;
guess=Math.floor(guess);
if(guess==myNumber)
{
GotIt==True;
alert("Got It");
alert("You took"+ NumOfGuess +"guess");
}
else
{
NumOfGuess+=1;
}
}
}
</script>
</body>
</html>
Plea check your browser console, you could see that you've some typo's like False/True they should be in lowercase format false/true, e.g:
var GotIt=False;
while(GotIt==Flase){
}
That should be :
var GotIt=false;
while(GotIt==false){
}
Hope this helps.
There is a typo. Replace Flase by false. You should also use === instead of == in your code, but that's secondary.

How to show html result form a texterea [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In a page of my web, I have a textarea to write html code. How to show this html result of this textarea into a other view under this texterea.
You are looking for a WYSIWYG for angular:
Angular WYSIWYG directive
textangular
angular-redactor
angular-froala
List provided here as well: http://ngmodules.org/tags/wysiwyg
<html>
<head>
<meta name="description" content="quick edit panel" />
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div class="prompt" contentEditable=true
style="padding:5px;
background-color:black;
height:28px;
color:white;
font-family:'courier new'">
write a html code <span style="background-color:blue;">here</span>
</div>
<div class="result">
write a html code <span style="background-color:blue;">here</span>
</div>
<script type="text/javascript">
$('.prompt').focus();
$('.prompt').keypress(function(event){
if ( event.which == 13 ) {
var resultado = $('.prompt').html();
console.log(resultado);
$('.result').append($('<div/>').html(resultado).text()+"<br>");
$('.prompt').html('');
$('.prompt').focus();
}
});
</script>
</body>
</html>

Javascript Method Not Working - Checkbox [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Good Morning,
I am having difficulty firguring out why this following Javascript method is not working.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--Author: Alejandro Deguzman Jr-->
<html>
<head>
<title>Realtor Inquiry</title>
<script type="text/javascript">
/* <![CDATA[ */
function termAgreed() {
if (document.getElementByID.checked == true) {
window.alert("Works!");
}
}
/* ]]> */
</script>
</head>
<body>
<form>
<input type="checkbox" id="agree" value="Terms" type="checked" checked="unchecked">Agree with the Terms & Conditions<br>
</form>
</body>
</html>
What im am trying to accomplish with the code above is when the checkbox is checked a prompt will appear. I did'ny quite know how to search for this specific answer I was looking for.
1) As suggested above you need to call your function inside your HTML. Use onchange() and call the function on change of check box.
2)You need to correct syntax of selecting element. its Id not ID and also pass the Id of element you want to select.
function termAgreed() {
if (document.getElementById("agree").checked == true) {
window.alert("Works!");
}
}
<input type="checkbox" id="agree" onchange="termAgreed()" value="Terms" checked="unchecked">Agree with the Terms & Conditions
I modified your termAgreed slightly. Please note that querySelector is not available in older browsers. I added a portion at the end to add the change event to the checkbox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--Author: Alejandro Deguzman Jr-->
<html>
<head>
<title>Realtor Inquiry</title>
<script type="text/javascript">
/* <![CDATA[ */
function termAgreed() {
if (document.querySelector('#agree').checked) {
window.alert("Works!");
}
}
/* ]]> */
</script>
</head>
<body>
<form>
<input type="checkbox" id="agree" value="Terms" type="checked" checked="unchecked">Agree with the Terms & Conditions<br>
</form>
<script type="text/javascript">
document.querySelector('#agree').addEventListener('change', termAgreed);
</script>
</body>
</html>
First, you're not using getElementById correctly. You need to pass in the element you're looking to find. Like so, getElementById("agree"). And as others have already posted in the comments, you're not calling 'termAgreed' in your code.

Categories

Resources