Im copying this from a book (..so it "should" work), i cant get this function to work, it might be a duplicate but i searched for an answer and cant get it working.
"Uncaught TypeError: Cannot set property 'borderColor' of undefined"
It might be something simple but the to i believe is the problem i tried setting it to an array and object but i dont really understand, any solution with simple explanation would be much appreciated.
function changeBorder(element, to){
element.style.borderColor = to;
}
var contentDiv = document.getElementById('color');
contentDiv.onmouseover = function(){
changeBorder('red');
};
contentDiv.onmouseout = function(){
changeBorder('black');
};
.box{
border: 1px solid red;
background-color:pink;
padding: 10px;
}
.row {
border: 1px solid #000;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="row" id="color">
<div class="element">1</div>
</div>
</body>
</html>
I just want to remove the error message and get the function to do something.
You need to set the this and change your functions like this:
contentDiv.onmouseover = function(){
changeBorder(this, 'red');
};
contentDiv.onmouseout = function(){
changeBorder(this, 'black');
};
Without the keyword this, it's not going to be found. Remember that in your function you are sharing the element:
function changeBorder(element, to){
element.style.borderColor = to;
}
Your changeBorder method expects 2 arguments but you always call it using only one.
Try this:
changeBorder(contentDiv, '[color]');
Also, this may not work if the
var contentDiv = document.getElementById('color');
statement is executed before the DOM is ready.
changeBorder('red') -> the var element inside the method is set with a string ('red'). A string has not style property, so element.style is undefined and you can't use properties( like borderColor ) of undefined objects
You have to modify the code a bit. Please check code below:
<html>
<head>
<style>
.box{
border: 1px solid red;
background-color:pink;
padding: 10px;
}
.row {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="row" id="color">
<div class="element">1</div>
</div>
<script type="text/javascript">
function changeBorder(element, to){
element.style.borderColor = to;
}
var contentDiv = document.getElementById('color');
alert(contentDiv);
contentDiv.onmouseover = function(){
changeBorder(contentDiv,'red');
};
contentDiv.onmouseout = function(){
changeBorder(contentDiv, 'black');
};
</script>
</body>
</html>
Related
Using JavaScript (or jQuery), create a variable called “myName” and set the value to your “myName”
Create a , that when you click it, it displays an alert with your “myName” variable.
Here is the problem I am currently working. I am super new to this and just trying to figure this out. Here is the code I currently have, when I click the button it displays nothing.
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick=var "myName"Woolley>Button</button>
</body>
</html>
java script
var "myName"
"Woolley"
you can check below code to change the value
<p id="changeName">Mark</p>
<button type="button" class="myevent">Button</button>
<script>
jQuery(function(){
$('.myevent').on('click', function(){
var name = "John Doe";
$('#changeName').val(name);
});
});
</script>
This is Jquery function please inlcude jquery library before use this.
Using pure Javascript:
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<script>
function displayName(){
var myName = "Woolley";
alert(myName);
}
</script>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="displayName()">Button</button>
</body>
</html>
To make the onclick on your button do something, tell the onclick what to do when triggered; In this case, I told it do execute the function myFunction.
In this function, create your variable and alert it using alert()
function myFunction() {
var myName = "Woolley";
alert(myName);
}
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="myFunction()">Button</button>
</body>
</html>
If you don't want to use a function, you can also tell onclick to execute alert() without a function:
<button type="button" onclick="var myName = 'Woolley'; alert(myName);">Button</button>
Please note that you need to use " and ' properly, otherwise your HTML is invalid and can't execute your JavaScript.
I am trying to make another div right under the existing div in the HTML
<html>
<head>
<title>
Media Player
</title>
<script src="script.js"></script>
</head>
<script>
makeOscarPlayer(document.getElementById("my-video"))
</script>
<body>
<div class="my-player">
Hello!
</div>
</body>
</html>
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `
hello
`
}
can someone explain to me what I am doing wrong? I am a self-taught developer sorry if my code is not perfectly organized still learning
You are calling the makeOscarPlayer() function before you are creating it.
You need to wrap the makeOscarPlayer() function declaration in a script tag.
You are passing in document.getElementById("my-video") as a parameter to makeOscarPlayer(), but there is no HTML element with an id of 'my-video'. You are giving the function a parameter of null, while the function declaration has no parameters.
You need to tell the script where to put the new element. To do that, you grab an existing element and use parentNode and insertBefore
Here is a barebones version that I got working for your reference:
<html>
<head>
<title>
Media Player
</title>
</head>
<script>
</script>
<body>
<div id="my-player">
Hello!
</div>
</body>
</html>
<script type="text/javascript">
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `hello`;
// This grabs the element that you want to create a new element by
var existingDiv = document.getElementById("my-player");
// This tells the script where to put the new element
existingDiv.parentNode.insertBefore( div, existingDiv.nextSibling);
}
// Must be called in the same script block or after the script holding the function declaration is loaded
makeOscarPlayer();
</script>
For more information on how parentNode and insertBefore work, see this Stack Overflow question
You need to append that new element to a specific parent, in your case to my-video.
The function appendChild appends the new element to a parent element.
function makeOscarPlayer(parent) {
var div = document.createElement("div");
div.innerHTML = 'Hello from Ele';
parent.appendChild(div);
}
makeOscarPlayer(document.getElementById("my-video"))
#my-player {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 300px;
background-color: #f1f1f1
}
#my-video div {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 200px;
font-weight: 700;
}
<div id="my-player">
Hello!
<div id="my-video">
</div>
</div>
It's a good start, but you're calling the function incorrectly and your function isn't adding anything to the page.
we use appendChild to add a node to the page.
In your function you create and add text to a div, but you don't return the node you made(and also you didn't close your line of code with a semi-colon so I added that too) but this should work:
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<div class="my-player">
Hello!
</div>
<script>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
</script>
</body>
</html>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<!-- added my-video div -->
<div id="my-video"></div>
<div class="my-player">
Hello!
</div>
</body>
</html>
I am trying to create a custom block in blockly but can't seems to get it to work. I generated code from block factory and this is what I got:
//say_input.js
Blockly.Blocks['say_input'] = {
init: function() {
this.appendDummyInput()
.appendField("say")
.appendField(new Blockly.FieldTextInput("something"), "say_input");
this.setColour(230);
this.setTooltip("");
this.setHelpUrl("");
}
};
Blockly.JavaScript['say_input'] = function(block) {
var text_say_input = block.getFieldValue('say_input');
// TODO: Assemble JavaScript into code variable.
// var code = 'alert("Hello! I am an alert box and'+text_say_input+'!");';
var code = '...;\n';
return code;
};
then I import it into my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Fixed Blockly</title>
<script src="js/blockly_compressed.js"></script>
<script src="js/blocks_compressed.js"></script>
<script src="js/msg/js/en.js"></script>
<script src="js/blocks/say_input.js"></script>
<style>
body {
background-color: #fff;
font-family: sans-serif;
}
h1 {
font-weight: normal;
font-size: 140%;
}
</style>
</head>
<body>
<button onclick="runCode()">Click me</button>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml id="toolbox" style="display: none;">
<block type="say_input">
<field name="say_input">something</field>
</block>
</xml>
<script>
var demoWorkspace = Blockly.inject('blocklyDiv', {
media: 'js/media/',
toolbox: document.getElementById('toolbox')
});
function runCode(){
window.LoopTrap = 1000;
Blockly.JavaScript.INFINITE_LOOP_TRAP =
'if(--window.LoopTrap == 0) throw "Infinite loop."\n';
var code = Blockly.JavaScript.workspaceToCode(workspace);
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
try {
eval(code);
} catch (e) {
alert(e);
}
}
</script>
</body>
</html>
and load it to browser. immediately I got this error:
Cannot set property 'say_input' of undefined
The error is at the line:
Blockly.JavaScript['say_input'] = function(block) {
My custom block appear in the workplace so I am sure the linking is working.
I checked this video and seems like I am doing nothing wrong.
How can I resolve this?
I found the solution. I have to link javascript_compressed.js then everything just work.
<script src="js/javascript_compressed.js"></script>
make sure to link it before the custom block.js.
I have been learning Javascript and I'm a little confused as to why this doesn't work. I'd like it so if you click the div, it creates a red border around it:
JSFiddle link
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Generation X</title>
</head>
<body>
<script src="test.js"></script>
<div id="clickHere" onclick="run()">
<p>Hello</p>
</div>
</body>
</html>
Javascript:
function run() {
document.getElementById("clickHere").style.border = thick solid red;
alert("Changed");
}
make it ..updated fiddle (you need to wrap it in the head tag)
function run(thisObj) {
thisObj.style.border = "1px solid red"; //or "1px solid #ff000"
alert("Changed");
}
also, rather than getting the reference to element again, simply pass the reference during the time of invocation.
So, instead of putting an onClick on div, use a addEventListener should be better.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes
https://jsfiddle.net/5jsbhbhu/5/
var run = function() {
document.getElementById("clickHere").style.borderColor = "red";
document.getElementById("clickHere").style.borderWidth = "1px";
document.getElementById("clickHere").style.borderStyle = "solid";
alert("Changed");
};
var node = document.getElementById('clickHere');
node.addEventListener('click', run);
In the html part I don't want to include the events related code, events related code should be in inside the script tag
<!doctype html>
<head>
<style>
div{
width:200px;
background-color:grey;
}
</style>
<body>
<p>use the below area for events</p>
<div> point here </div>
<a id="event_output"></a>
<script>
var output=document.getElementById("event_output").innerHTML;
var div=document.getElementsByTagName("div");
div[0].onmouseover=function(){output="mouse over"}
div[0].onmouseout=function(){output="mouse out"}
</script>
</body>
You are just updating the output variable which is a string. Instead store the object reference and set its innerHTML property.
<style>
div {
width: 200px;
background-color: grey;
}
</style>
<p>use the below area for events</p>
<div>point here</div>
<a id="event_output"></a>
<script>
var output = document.getElementById("event_output");
var div = document.getElementsByTagName("div");
div[0].onmouseover = function() {
output.innerHTML = "mouse over"
}
div[0].onmouseout = function() {
output.innerHTML = "mouse out"
}
</script>