怎么在html中写javascript代码?

没学过JavaScript,最近学javaweb要求在html里写一个add函数并进行简单的交互,不知道怎么写,函数是和c一样吗,写了不知道为啥运行不出来,运行的网页是空的。

img

img

img


要求完整能运行的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea name="" id="input" cols="30" rows="10">  </textarea>
<script>
    function add(){
        var num1 = 10;
        var num2 = 5;
        var sum = num1 + num2;
        document.getElementById("input").value = sum;
    }
    add();
</script>
 
</body>
</html>

直接改成下面方式就可以弹窗看效果:add(); 改为 alert(add());

那肯定不一样啊。
以下是一种可能的实现方式。首先,我们需要在HTML文档的<script>标签中添加JavaScript代码。这个代码定义了一个加法函数,并使用这个函数计算了"10.5"(作为字符串处理)和其他一些数值的和。然后,这个和被添加到HTML文档中的一个<p>标签中。

<!DOCTYPE html>
<html>
<body>

<p id="result"></p>
<input  id="number1"/>
<input  id="number2"/>


<script>
function add() {
  var num1 = Number(document.getElementById("number1").value);
  var num2 = Number(document.getElementById("number2").value);
  var sum = num1 + num2;
  document.getElementById("result").innerHTML = "和为: " + sum;
}

// 将10.5作为字符串处理
var number1 = "10.5";
add();
</script>

</body>
</html>

这段代码在实际使用中可能存在一些问题。比如,它假设用户输入的是数字,如果用户输入的是非数字的字符,那么Number()函数会返回NaN。另外,这个代码没有处理用户输入可能的变化,因此在实际应用中可能需要添加一些错误处理和用户输入验证的代码。

【以下回答由 GPT 生成】

在HTML中编写JavaScript代码可以通过以下步骤来实现一个可运行的add函数并进行简单交互:

  1. 在HTML文件中的<head>标签中添加一个<script>标签,用于包含JavaScript代码。

  2. <script>标签中编写JavaScript代码。首先,定义一个名为add的函数,该函数将接收两个参数,并返回它们的和。

```javascript

```

  1. 在HTML文件中的<body>标签内,添加一个用于用户交互的元素,例如一个按钮或输入框。可以使用<input>标签创建一个输入框,并为其添加一个按钮来触发计算。

```html

```

  1. 在JavaScript代码中,我们定义了一个名为calculate的函数。该函数将从输入框中获取用户输入的两个数字,将其转换为整数,并调用add函数计算它们的和。然后,将结果显示在页面上的一个段落(<p>标签)中。在按钮上使用onclick属性将calculate函数与按钮的点击事件关联起来。

  2. 保存并运行HTML文件。当您在输入框中输入数字并点击计算按钮时,结果将显示在页面上。

请注意,JavaScript的函数与C语言的函数有相似之处,但也存在一些区别。JavaScript是一种脚本语言,运行在浏览器中,而C语言则是一种编译型语言。由于JavaScript是解释执行的,函数的定义可以直接放在需要使用的地方,而不需要提前声明。另外,JavaScript的语法和功能与C语言也有一些差异,在使用时需要注意它们之间的差异。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632